Altres selectors CSS

(Material adaptat i traduït de https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)

Hem vist als materials de l’assignatura selectors de l’estil [atribut], que reprenta els elements que tinguin un atribut amb nom atribut i [atribut=valor], que representen, naturalment, els elements que tenen l’atribut atribut amb valor exactament valor.

Disposem, però, d’altres selectors relacionats a través de comprovació de patrons (pattern matching):

[atribut~=valor]

Representa els elements amb un atribut atribut que tenen per valor una llista de paraules separades per espais, una de les quals és exactament valor.

[atribut|=valor]

Representa els elements amb un atribut atribut amb valor exactament valor o que comenci per valor seguit immediatament d’un guió -.

[atribut^=valor]

Representa els elements amb un atribut atribut amb valor començant per valor.

[atribut$=valor]

Representa els elements amb un atribut atribut i valor acabat en valor.

[atribut*=valor]

Representa els elements amb un atribut atribut i valor contenint valor.

Així, per exemple,

/* Posa en negreta tots els span amb atribut "lang" */
span[lang] {font-weight:bold;}
 
/* Posa en verd tots els span en què s'hagi 
   especificat idioma portuguès */
span[lang="pt"] {color:green;}

/* Posa en vermell els span en que s'hagi especificat
   idioma xinès, tant simplificat (zh-CN) com
   tradicional (zh-TW) */
span[lang|="zh"] {color: red;}

/* Dóna fons daurat a tots els enllaços que especifiquin
   un identificador */
a[href^="#"] {background-color:gold}

/* Posa en vermell tots els enllaços que acabin en ".cn" */
a[href$=".cn"] {color: red;}

/* Dóna fons gris a tots els enllaços que 
   continguin la cadena "example" */
a[href*="example"] {background-color: #CCCCCC;}