Selectores de atributo

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

css
/* 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]

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

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

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

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

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

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

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

Result

Especificaciones

Specification
Selectors Level 4
# attribute-selectors

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también