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

/* <a> elements with a title attribute */
aCss Attribute selectors example

 {
  color: purple;
}

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
  padding: 2px;
}

Sintaxis

[attr]
Representa elementos con un nombre de atributo de attr.
[attr=value]
Representa elementos con un nombre de atributo de attr cuyo valor es exactamente valor.
[attr~=value]
Representa elementos con un nombre de atributo de attr cuyo valor es una lista de palabras separadas por espacios en blanco, una de las cuales es exactamente valor.
[attr|=value]
Representa elementos con un nombre de atributo de attr cuyo valor puede ser exactamente valor o puede empezar con valor seguido inmediatamente de un guion, - (U + 002D). A menudo se utiliza para coincidencias de subcódigo de idioma.
[attr^=value]
Representa elementos con un nombre de atributo de attr cuyo valor está prefijado (precedido) por valor.
[attr$=value]
Representa elementos con un nombre de atributo de attr cuyo valor tiene el sufijo (seguido) por valor.
[attr*=value]
Representa elementos con un nombre de atributo de attr cuyo valor contiene al menos una aparición de valor dentro de la cadena.
[attr operator value i]
Añadiendo un i (o I) antes del corchete de cierre hace que el valor se compare sin distinción entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).
[attr operator value s] Esta es una API experimental que no debe usarse en código de producción.
Añadiendo un s (o S) antes del corchete de cierre hace que el valor se compare entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).

Ejemplos de

Enlaces

CSS

a {
  color: blue;
}

/* Internal links, beginning with "#" */
a[href^="#"] {
  background-color: gold;
}

/* Links with "example" anywhere in the URL */
a[href*="example"] {
  background-color: silver;
}

/* Links with "insensitive" anywhere in the URL,
   regardless of capitalization */
a[href*="insensitive" i] {
  color: cyan;
}

/* Links with "cAsE" anywhere in the URL,
with matching capitalization */
a[href*="cAsE" s] {
  color: pink;
}

/* Links that end in ".org" */
a[href$=".org"] {
  color: red;
}

/* Links that start with "https" and end in ".org" */
a[href^="https"][href$=".org"] {
  color: green;
}

HTML

<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
  <li><a href="https://example.org">Example https org link</a></li>
</ul>

Resultado

Idiomas

CSS

/* All divs with a `lang` attribute are bold. */
div[lang] {
  font-weight: bold;
}

/* All divs without a `lang` attribute are italicized. */
div:not([lang]) {
  font-style: italic;
}

/* All divs in US English are blue. */
div[lang~="en-us"] {
  color: blue;
}

/* All divs in Portuguese are green. */
div[lang="pt"] {
  color: green;
}

/* All divs in Chinese are red, whether
   simplified (zh-CN) or traditional (zh-TW). */
div[lang|="zh"] {
  color: red;
}

/* All divs with a Traditional Chinese
   `data-lang` are purple. */
/* Note: You could also use hyphenated attributes
   without double quotes */
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 en HTML

La especificación HTML requiere type atributo para ser emparejado sin distinción entre mayúsculas y minúsculas debido a que se utiliza principalmente en el <input> elemento, tratando de utilizar selectores de atributos para con el type atributo de un lista ordenada no funciona sin el modificador que distingue entre mayúsculas y minúsculas.

CSS

/* List types require the case sensitive flag due to a quirk in how HTML treats the type attribute. */
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>

Resultado

Especificaciones

Especificación Estado Comentario
Selectores Nivel 4
La definición de ‘selectores de atributos’ en esa especificación.
Borrador de trabajo Agrega un modificador para la selección de valores de atributo que distinguen entre mayúsculas y minúsculas y no distingue entre mayúsculas y minúsculas ASCII.
Selectores Nivel 3
La definición de ‘selectores de atributos’ en esa especificación.
Recomendación
CSS Nivel 2 (Revisión 1)
La definición de ‘selectores de atributos’ en esa especificación.
Recomendación Definición inicial

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
Attribute_selectors 1 12 1 7 9 3 ≤37 18 4 14 1 1.0
case_insensitive_modifier 49 79 47 No 36 9 49 49 47 36 9 5,0
case_sensitive_modifier

Sin ver error 1041095.

Sin ver error 1041095.

66 No

Sin ver error 1041095.

No

Sin ver error 1041095.

Sin ver error 1041095.

66

Sin ver error 1041095.

No

Sin ver error 1041095.

Ver también