Selectores de atributo

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).
[attr operator value s]
Agregar una s (o S) antes del corchete de cierre hace que el valor sea comparado distinguiendo 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

Listas Ordenadas

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La especificación HTML requiere que el atributo type distinga entre mayúsculas y minúsculas debido a que se usa principalmente en el elemento <input>, tratando de usar selectores de atributos con el atributo type de una lista ordenada no funciona sin el modificador de mayúsculas y minúsculas.

CSS

/* 
Los tipos de lista requieren poder distinguir entre mayúsculas
y minúsculas debido al peculiar comportamiento que tiene HTML
con el atributo "type" 
*/

ol[type="a"] {
  list-style-type: lower-alpha;
  background: red;
}

ol[type="a" s] {
  list-style-type: lower-alpha;
  background: lime;
}

ol[type="A" s] {
  list-style-type: upper-alpha;
  background: lime;
}

HTML

<ol type="A">
  <li>Example list</li>
</ol>

Result

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 para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
Attribute selector ([attr=value])Chrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1IE Soporte completo 7Opera Soporte completo 9Safari Soporte completo 3WebView Android Soporte completo ≤37Chrome Android Soporte completo 18Firefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 1Samsung 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 49Firefox Android Soporte completo 47Opera Android Soporte completo SiSafari iOS Soporte completo 9Samsung Internet Android Soporte completo 5.0
Case-sensitive modifier (s)
Experimental
Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 66IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 66Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.

Ver también