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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico1121793
Case-insensitive modifier (i)49 No47 No369
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico Si Si Si4 Si Si Si
Case-insensitive modifier (i)4949 No47 Si Si5.0

Ver también

Etiquetas y colaboradores del documento

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