Explicación detallada del selector de atributo CSS

CSS 2 introdujo el selector de atributo.

El selector de atributo puede seleccionar elementos según las propiedades y los valores de las propiedades del elemento.

Selector de atributo simple

Si desea seleccionar elementos con un atributo específico, sin importar el valor del atributo, puede usar el selector de atributo simple.

Ejemplo 1

Si desea que todos los elementos que contienen un título (title) se vuelvan rojos, puede escribir:

*[title] {color:red;}

Prueba personalmente

Ejemplo 2

Al igual que el anterior, puede aplicar estilos solo a los enlaces (elementos a) con atributo href:

a[href] {color:red;}

Prueba personalmente

Ejemplo 3

Se puede seleccionar según múltiples atributos, simplemente enlace los selectores de atributo juntos.

Por ejemplo, para establecer el texto de los enlaces HTML que tienen tanto el atributo href como el atributo title en rojo, se puede escribir así:

a[href][title] {color:red;}

Prueba personalmente

Ejemplo 4

Se pueden adoptar algunos métodos creativos para utilizar esta característica.

Por ejemplo, se puede aplicar estilos a todas las imágenes con la propiedad alt para resaltar estas imágenes válidas:

img[alt] {border: 5px solid red;}

Prueba personalmente

Consejo:Este caso particular es más adecuado para la diagnóstico en lugar de para el diseño, es decir, para determinar si la imagen es efectivamente válida.

Ejemplo 5: Uso de selectores de atributo en documentos XML

Los selectores de atributo son muy útiles en los documentos XML, ya que el lenguaje XML recomienda especificar los nombres de los elementos y los nombres de los atributos para el uso de los elementos y atributos.

Supongamos que hemos diseñado un documento XML para describir los planetas del sistema solar. Si queremos seleccionar todos los elementos planet element con la propiedad moons y mostrarlos en rojo para prestar más atención a los planetas con moons, podemos escribir así:

planet[moons] {color:red;}

Esto hará que el texto de los segundos y terceros elementos dentro de la siguiente fragmento de marcadores se muestre en rojo, pero el texto del primer elemento no será rojo:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Ver el efecto

Selección basada en el valor específico del atributo

Además de seleccionar elementos que tienen ciertas propiedades, también se puede reducir aún más el rango de selección, seleccionando solo elementos con valores de propiedades específicos.

Ejemplo 1

Por ejemplo, supongamos que desea que los enlaces que apuntan a un documento específico en el servidor web se vuelvan rojos, se puede escribir así:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

Prueba personalmente

Ejemplo 2

Al igual que con los selectores de atributo simples, se pueden enlazar múltiples selectores de atributo-valor para seleccionar un documento.

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

Esto cambiará el texto del primer enlace dentro de los siguientes marcadores a rojo, pero los segundos o terceros enlaces no se verán afectados:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

Prueba personalmente

Ejemplo 3

Del mismo modo, el lenguaje XML también puede utilizar este método para establecer estilos.

Volvamos a la ejemplo de planeta. Supongamos que solo desea seleccionar los elementos planet que tengan el valor del atributo moons igual a 1:

planet[moons="1"] {color: red;}

El código anterior cambiará el segundo elemento del siguiente marcado a rojo, pero el primero y el tercero no se verán afectados:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Ver el efecto

El atributo y el valor del atributo deben coincidir completamente

Por favor, tenga en cuenta que este formato requiere una coincidencia completa con el valor del atributo.

Si el valor del atributo contiene una lista de valores separados por espacios, puede haber problemas en la coincidencia.

Considere el siguiente fragmento de marcado:

<p class="important warning">Este párrafo es una advertencia muy importante.</p>

Si se escribe p[class="important"], esta regla no puede coincidir con el marcado de ejemplo.

Para seleccionar un elemento específico según el valor del atributo, debe escribirse así:

p[class="important warning"] {color: red;}

Prueba personalmente

Selección basada en el valor parcial del atributo

Si es necesario seleccionar según alguna palabra de una lista de palabras en el valor del atributo, se debe utilizar el signo de onda (~).

Supongamos que desea seleccionar elementos que contengan "important" en el atributo class, se puede lograr con este selector:

p[class~="important"] {color: red;}

Prueba personalmente

Si se omite el signo de onda, significa que se necesita una coincidencia de valor completo.

La diferencia entre el selector de atributo de valor parcial y la notación de nombre de clase con puntos.

Este selector es equivalente a la notación de nombre de clase con puntos que hemos discutido en los selectores de clase.

Es decir, p.important y p[class="important"] son equivalentes cuando se aplican a un documento HTML.

Entonces, ¿por qué还需要有 "~=" selector de atributo? Porque puede utilizarse para cualquier atributo, no solo para class.

Por ejemplo, puede haber un documento que contenga una gran cantidad de imágenes, de las cuales solo algunas son imágenes. Al respecto, se puede utilizar un selector de atributo de documento basado en title para seleccionar solo estas imágenes:

img[title~="Figure"] {border: 1px solid gray;}

Esta regla seleccionará todas las imágenes cuyos textos de título contengan "Figure". Las imágenes que no tienen el atributo title o que no contienen "Figure" en el atributo title no coincidirán.

Prueba personalmente

Selectores de atributo de coincidencia de subcadena

A continuación, te presentamos un módulo de selector más avanzado, que se publicó después de que CSS2 se completó, que contiene más selectores de valores parciales de atributos. Según la norma, se debe llamar a estos "selectores de atributo de coincidencia de subcadena".

Muchos navegadores modernos admiten estos selectores, incluyendo IE7.

La siguiente tabla es un resumen simple de estos selectores:

Tipos Descripción
[abc^="def"] Seleccionar todos los elementos cuyos valores de atributo abc comiencen con "def"
[abc$="def"] Seleccionar todos los elementos cuyos valores de atributo abc terminen en "def"
[abc*="def"] Seleccionar todos los elementos que contengan la subcadena "def" en el valor del atributo abc

Puedes pensar en que estos selectores tienen muchos usos.

Por ejemplo, si deseas aplicar estilos a todos los enlaces que apuntan a CodeW3C.com, no tienes que especificar una clase para todos estos enlaces y luego escribir estilos según esa clase, solo tienes que escribir la siguiente regla:

a[href*="codew3c.com"] {color: red;}

Prueba personalmente

Consejo:Cualquier atributo puede usar estos selectores.

Tipos de selectores de atributo específico

A continuación, te presentamos el selector de atributo específico. Mira el siguiente ejemplo:

*[lang|="en"] {color: red;}

Esta regla seleccionará todos los elementos con el atributo lang igual a en o que comience con en-.

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-<p lang="au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

Prueba personalmente

En general, [att|="val"] se puede usar para cualquier atributo y valor.

Supongamos que en un documento HTML hay una serie de imágenes, cada una de las cuales tiene un nombre de archivo que se parece a figure-1.jpg y figure-2.jpgCon eso, puedes usar los siguientes selectores para coincidir con todas estas imágenes:

img[src|="figure"] {border: 1px solid gray;}

Prueba personalmente

Por supuesto, el uso más común de este selector de atributo es para coincidir con los valores de lenguaje.

Manual de referencia de selectores CSS

Selector Descripción
[attribute] Usado para seleccionar elementos que tienen un atributo especificado.
[attribute=value] Usado para seleccionar elementos que tienen un atributo y valor especificados.
[attribute~=value] Usado para seleccionar elementos que contienen el vocabulario especificado en el valor del atributo.
[attribute|=value] Usado para seleccionar elementos que tienen un valor de atributo que comienza con el valor especificado, el valor debe ser una palabra completa.
[attribute^=value] Coincidir con cada elemento que comienza con el valor especificado en el valor del atributo.
[attribute$=value] Coincide con cada elemento que termina con el valor especificado en el valor del atributo.
[attribute*=value] Coincide con cada elemento que contiene el valor especificado en el valor del atributo.