Otros selectores CSS

(Material adaptado y traducido de https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)

Hemos visto en los materiales de la asignatura selectores del estilo [atributo], que reprenta los elementos con un atributo de nombre atributo y [atributo=valor], que representan, naturalmente, los elementos con atributo atributo con valor exactamente valor.

Pero disponemos de otros selectores relacionados a través de correspondencia de patrones (pattern matching):

[atributo~=valor]

Representa los elementos con un atributo atributo cuyo valor sea una lista de palabras separadas por espacios y uno de los cuales sea exactamente valor.

[atributo|=valor]

Representa los elementos con un atributo atributo y valor exactamente valor o que comience por valor seguido inmediatamente de un guión - (U+002D).

[atributo^=valor]

Representa los elementos con un atributo atributo y valor comenzando por valor.

[atributo$=valor]

Representa los elementos con un atributo atributo y valor acabando en valor.

[atributo*=valor]

Representa los elementos con un atributo atributo y valor conteniendo valor.

Así, por ejemplo:

/* Pone en negrita todos los spans con atributo "lang" */
span[lang] {font-weight:bold;}
 
/* Pone en verde todos los spans en que se haya 
   especificado idioma portugués */
span[lang="pt"] {color:green;}

/* Pone en rojo los spans en que se haya especificado
   idioma chino, tanto simplificado (zh-CN) como
   tradicional (zh-TW) */
span[lang|="zh"] {color: red;}

/* Da fondo dorado a todos los enlaces que especifiquen
   un identificador */
a[href^="#"] {background-color:gold}

/* Pone en rojo todos los enlaces que acaben en ".cn" */
a[href$=".cn"] {color: red;}

/* Da fondo gris a todos los enlaces que 
   contengan la cadena "example" */
a[href*="example"] {background-color: #CCCCCC;}