Selectores de atributo

Estos selectores permiten seleccionar un elemento solo a partir de la presencia de un atributo (por ejemplo href) o a partir de varias coincidencias diferentes con respecto al valor del atributo.

Selector	Ejemplo	Descripción
[attr]	a[title]	Relaciona elementos con un mismo nombre de atributo, attr (el valor que se indica entre corchetes).
[attr=value]	a[href="https://example.com"]	Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor es exactamente el mismo, value (la cadena de caracteres que se indica entre corchetes).
[attr~=value]	p[class~="special"]	Relaciona los elementos con un mismo nombre de atributo, attr, cuyo valor es exactamente value, o los elementos con un mismo atributo attr que contiene uno o más valores de los cuales, al menos uno, coincide con value. Ten en cuenta que en una lista que incluya más de un valor, los distintos valores se separan con un espacio.
[attr|=value]	div[lang|="zh"]	Relaciona los elementos con un mismo nombre de atributo, attr, cuyo valor puede ser exactamente value o puede comenzar con value seguido inmediatamente por un guion.

En el ejemplo siguiente puedes observar cómo se utilizan estos selectores.

• Mediante el uso de li[class] podemos relacionar cualquier selector con un atributo de clase. Los relaciona todos menos el primer elemento de la lista.
• li[class="a"] relaciona un selector con una clase de a, pero no un selector con una clase de a con otra clase separada por un espacio como parte del valor. Selecciona el segundo elemento de la lista.
• li[class~="a"] coincidirá con una clase a pero también con un valor que contenga la clase de a como parte de una lista de elementos separados por un espacio. Selecciona el segundo y el tercer elemento de la lista.

Estos selectores permiten un tipo más avanzado de relación entre las subcadenas de caracteres que constituyen el valor del atributo. Por ejemplo, si tienes las clases box-warning y box-error y quieres encontrar todos los elementos que empiezan con la cadena de caracteres "box-", puedes seleccionarlas ambas con [class^="box-"].

Selector	Ejemplo	Descripción
[attr^=value]	li[class^="box-"]	Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor empieza exactamente con la subcadena de caracteres value.
[attr$=value]	li[class$="-box"]	Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor termina exactamente con la subcadena de caracteres value.
[attr*= ]	li[class*="box"]	Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor incluye al menos una ocurrencia de la subcadena value en algún punto de la cadena.

El ejemplo siguiente muestra cómo se usan estos selectores:

• li[class^="a"] relaciona cualquier valor de atributo que empieza con a; luego, relaciona los dos primeros elementos de la lista se verán iguales.
• li[class$="a"] relaciona cualquier valor de atributo que termina con a; luego, relaciona el primer y el tercer elemento de la lista.
• li[class*="a"] relaciona cualquier valor de atributo que contiene a en cualquier posición; luego, relaciona todos los elementos de la lista.

Si quieres relacionar los valores de atributo tanto si están escritos en mayúsculas como en minúsculas, puedes utilizar el valor i antes del paréntesis de cierre. Este indicador informa al navegador de que debe relacionar todos los caracteres ASCII independientemente de si las letras son mayúsculas o minúsculas. Sin este indicador, los valores se relacionarán según las directrices del lenguaje del documento con respecto a la distinción entre mayúsculas y minúsculas; en el caso del HTML, se distinguirá entre mayúsculas y minúsculas.

En el ejemplo siguiente, el primer selector relaciona valores que empiezan con a; luego, solo coincide el primer elemento de la lista porque los otros dos comienzan con una A mayúscula. El segundo selector utiliza el indicador de no distinción entre mayúsculas y minúsculas, así que relaciona todos los elementos de la lista.

Ahora que hemos terminado con los selectores de atributo, puedes avanzar al artículo siguiente y leer acerca de los selectores de pseudoclases y pseudoelementos.

• Anterior
• Overview: Bloques de construcción CSS
• Siguiente