El selector de atributos CSS coincide con los elementos en función de la presencia o el valor de un atributo determinado.

/* elementos <a> con un atributo de título */
a[title] {
  color: purple;
}

/* elementos <a> con un href que coincida con "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* elementos <a> con un href que contenga "example" */
a[href*="example"] {
  font-size: 2em;
}

/* elementos <a> con un href que termina en ".org" */
a[href$=".org"] {
  font-style: italic;
}
[attr]
Selecciona los elementos que tienen el atributo attr.
[attr=value]
Selecciona los elementos cuyo atributo attr tenga exactamente el valor value.
[attr~=value]

Selecciona los elementos cuyo atributo attr tenga por valor una lista de palabras separadas por espacios, una de las cuales sea value.

[attr|=value]
Selecciona los elementos cuyo atributo attr tenga exactamente el valor value o empiece por value seguido de un guión - (U+002D). Se puede usar para coincidencias de subcódigos en otros idiomas.
[attr^=value]
Selecciona los elementos cuyo atributo attr tenga un valor prefijado  por value.
[attr$=value]
Selecciona los elementos cuyo atributo attr cuyo valor tiene el sufijo (seguido) de value.
[attr*=value]
Selecciona los elementos cuyo atributo attr tenga un valor que contenga value.
[attr operator value i]
Agregar una i (o I) antes del corchete de cierre hace que el valor sea comparado sin distinguir entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).

Ejemplos

Enlaces

CSS

a {
  color: blue;
}

/* Enlaces internos, comenzando con "#" */
a[href^="#"] {
  background-color: gold;
}

/* Enlaces con "example" en cualquier parte de la URL */
a[href*="example"] {
  background-color: silver;
}

/* Enlaces con "insensitive" en cualquier parte de la URL, 
   independientemente de las mayúsculas */
a[href*="insensitive" i] {
  color: cyan;
}

/* Enlaces que terminan en ".org" */
a[href$=".org"] {
  color: red;
}

HTML

<ul>
  <li><a href="#internal">Enlace interno</a></li>
  <li><a href="http://example.com">Enlace de ejemplo</a></li>
  <li><a href="#InSensitive">Enlace interno insensible Insensitive</a></li>
  <li><a href="http://example.org">Ejemplo de enlace .org</a></li>
</ul>

Resultado

Idiomas

CSS

/* Todos los divs con un atributo `lang` están en negrita. */
div[lang] {
  font-weight: bold;
}

/* Todos los divs en inglés de EE. UU. son azules. */
div[lang~="en-us"] {
  color: blue;
}

/* Todos los divs en portugués son verdes. */
div[lang="pt"] {
  color: green;
}

/* Todos los divs en chino son rojos, ya sean 
   simplificados (zh-CN) o tradicionales (zh-TW). */
div[lang|="zh"] {
  color: red;
}

/* Todos los divs con `data-lang` Traditional Chinese
   son de color púrpura. */
/* Nota: también puede usar atributos con guiones
   sin comillas dobles */ 
div[data-lang="zh-TW"] {
  color: purple;
}

HTML

<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好!</div>
<div lang="zh-TW">世界您好!</div>
<div data-lang="zh-TW">?世界您好!</div>

Resultado

Especificaciones

Especificación Estado Comentarios
Selectors Level 4
La definición de 'attribute selectors' en esta especificación.
Working Draft Agrega un modificador para la selección de valores de atributos insensibles a mayúsculas / minúsculas ASCII.
Selectors Level 3
La definición de 'attribute selectors' en esta especificación.
Recommendation  
CSS Level 2 (Revision 1)
La definición de 'attribute selectors' en esta especificación.
Recommendation Definición Inicial.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1IE Soporte completo 7Opera Soporte completo 9Safari Soporte completo 3WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
Case-insensitive modifier (i)Chrome Soporte completo 49Edge Sin soporte NoFirefox Soporte completo 47IE Sin soporte NoOpera Soporte completo 36Safari Soporte completo 9WebView Android Soporte completo 49Chrome Android Soporte completo 49Edge Mobile Sin soporte NoFirefox Android Soporte completo 47Opera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo 5.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte

Ver también

Etiquetas y colaboradores del documento

Etiquetas: 
Colaboradores en esta página: lajaso, teoli, jota1410
Última actualización por: lajaso,