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 title */
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 comience con "#" */
a[href^="#"] {
  color: #001978;
}

/* Elementos <a> con un href que termine en ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* Elementos <a> cuyo atributo class contenga la palabra "logo" */
a[class~="logo"] {
  padding: 2px;
}
[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] This is an experimental API that should not be used in production code.
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

Experimental

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

BCD tables only load in the browser

Ver también