CSS Selectores de atributos


Ejemplo

Visión general

Los selectores de atributos se pueden utilizar con varios tipos de operadores que cambian los criterios de selección en consecuencia. Seleccionan un elemento utilizando la presencia de un atributo o valor de atributo dado.

Selector (1) Elemento emparejado Selecciona elementos ... Versión CSS
[attr] <div attr> Con atributo attr 2
[attr='val'] <div attr="val"> Donde atributo attr tiene valor val 2
[attr~='val'] <div attr="val val2 val3"> Donde aparece val en el
lista de espacios en blanco separados de attr
2
[attr^='val'] <div attr="val1 val2"> Donde el valor de attr comienza con val 3
[attr$='val'] <div attr="sth aval"> Donde el valor del attr termina con val 3
[attr*='val'] <div attr="somevalhere"> Donde attr contiene val cualquier lugar 3
[attr|='val'] <div attr="val-sth etc"> Donde el valor de attr es exactamente val ,
o comienza con val e inmediatamente
seguido de - (U + 002D)
2
[attr='val' i] <div attr="val"> Donde attr tiene valor val ,
haciendo caso omiso de la caja de letras de val .
4 (2)

Notas:

  1. El valor del atributo puede estar entre comillas simples o dobles. Ninguna cita puede funcionar, pero no es válida de acuerdo con el estándar CSS, y no se recomienda.

  2. No existe una especificación CSS4 única e integrada, ya que se divide en módulos separados. Sin embargo, hay módulos de "nivel 4". Ver soporte del navegador .

Detalles

[attribute]

Selecciona elementos con el atributo dado.

div[data-color] {
  color: red;
}
<div data-color="red">This will be red</div>
<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>

Demo en vivo en JSBin

[attribute="value"]

Selecciona elementos con el atributo y valor dados.

div[data-color="red"] {
  color: red;
}
<div data-color="red">This will be red</div>
<div data-color="green">This will NOT be red</div>
<div data-color="blue">This will NOT be red</div>

Demo en vivo en JSBin

[attribute*="value"]

Selecciona elementos con el atributo y valor dados donde el atributo dado contiene el valor dado en cualquier lugar (como subcadena).

[class*="foo"] {
  color: red;
}
<div class="foo-123">This will be red</div>
<div class="foo123">This will be red</div>
<div class="bar123foo">This will be red</div>
<div class="barfooo123">This will be red</div>
<div class="barfo0">This will NOT be red</div>

Demo en vivo en JSBin

[attribute~="value"]

Selecciona elementos con el atributo y valor dados donde el valor dado aparece en una lista separada por espacios en blanco.

[class~="color-red"] {
  color: red;
}
<div class="color-red foo-bar the-div">This will be red</div>
<div class="color-blue foo-bar the-div">This will NOT be red</div>

Demo en vivo en JSBin

[attribute^="value"]

Selecciona elementos con el atributo y valor dados donde el atributo dado comienza con el valor.

[class^="foo-"] {
  color: red;
}
<div class="foo-123">This will be red</div>
<div class="foo-234">This will be red</div>
<div class="bar-123">This will NOT be red</div>

Demo en vivo en JSBin

[attribute$="value"]

Selecciona elementos con el atributo y valor dados donde el atributo dado termina con el valor dado.

[class$="file"] {
  color: red;
}
<div class="foobar-file">This will be red</div>
<div class="foobar-file">This will be red</div>
<div class="foobar-input">This will NOT be red</div>

Demo en vivo en JSBin

[attribute|="value"]

Selecciona elementos con un atributo y valor dados donde el valor del atributo es exactamente el valor dado o es exactamente el valor dado seguido de - (U + 002D)

[lang|="EN"] {
  color: red;
}
<div lang="EN-us">This will be red</div>
<div lang="EN-gb">This will be red</div>
<div lang="PT-pt">This will NOT be red</div>

Demo en vivo en JSBin

[attribute="value" i]

Selecciona elementos con un atributo y valor dados donde el valor del atributo puede representarse como Value , VALUE , vAlUe o cualquier otra posibilidad que no vAlUe entre mayúsculas y minúsculas.

[lang="EN" i] {
  color: red;
}
<div lang="EN">This will be red</div>
<div lang="en">This will be red</div>
<div lang="PT">This will NOT be red</div>

Demo en vivo en JSBin

Especificidad de los selectores de atributos.

0-1-0

Igual que el selector de clase y la pseudoclase.

*[type=checkbox] // 0-1-0

Tenga en cuenta que esto significa que se puede usar un selector de atributos para seleccionar un elemento por su ID en un nivel de especificidad más bajo que si se seleccionara con un selector de ID : [id="my-ID"] apunta al mismo elemento que #my-ID pero con menor especificidad.

Vea la sección de sintaxis para más detalles.