Selectors d'atribut

Com ja saps a partir de l’estudi de l'HTML, els elements poden tenir atributs, que donen més detalls sobre l'element que s’etiqueta. En CSS pots utilitzar selectors d’atributs per a seleccionar elements que tenen uns atributs determinats. Aquest article et mostra com utilitzar aquests selectors tan útils.

Prerequisits: Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (consulta Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu: Conèixer els selectors d’atributs i com utilitzar-los.

Selectors de presència i de valor

Aquests selectors permeten seleccionar un element només per la presència d’un atribut (per exemple href) o per diferents coincidències amb el valor de l’atribut.

Selector Exemple Descripció
[attr] a[title] Selecciona elements que tenen com a nom d'atribut attr el valor entre claudàtors.
[attr=value] a[href="https://example.com"] Selecciona elements que tenen el nom d'atribut attr, el valor del qual sigui exactament la cadena de caràcters que hi ha entre cometes: value.
[attr~=value] p[class~="special"]

Selecciona elements amb un nom d’atribut attr el valor del qual és exactament value, o elements que tenen un atribut attr que conté un o més valors, dels quals almenys un coincideix amb value.

Observa que en una llista de diversos valors, els valors se separen amb espais en blanc.

[attr|=value] div[lang|="zh"] Selecciona elements que tenen un nom d’atribut attr que pot ser exactament value o que pot començar per value seguit immediatament d’un guionet.

En l'exemple següent pots veure que com es fan servir aquests selectors.

  • Utilitzant li[class] podem seleccionar qualsevol selector amb un atribut de classe. Això ho fa coincidir tot menys el primer element de la llista.
  • li[class="a"] relaciona un selector amb una classe a, però no un selector amb una classe a amb una altra classe separada per un espai que sigui part del valor. Selecciona el segon element de llista.
  • li[class~="a"] selecciona una classe a, però que també tingui un valor que contingui la classe a com a part d'una llista separada amb espais. Selecciona el segon i el tercer elements de la llista.

Selectors de subcadena

Aquests selectors permeten obtenir una concordança més ajustada a partir de les subcadenes que conté el valor del teu atribut. Per exemple, si hi ha les classes box-warning i box-error i vols seleccionar tot el que comença amb la cadena «box-», pots seleccionar-les totes dues amb [class^="box-"].

Selector Exemple Descripció
[attr^=value] li[class^="box-"] Selecciona elements amb un nom d'atribut attr que conté la subcadena value al principi.
[attr$=value] li[class$="-box"] Selecciona elements amb un nom d’atribut attr que conté la subcadena value al final.
[attr*= ] li[class*="box"] Relaciona elements amb un nom d'atribut attr que conté almenys una ocurrència de la subcadena value en qualsevol lloc de la cadena.

L’exemple següent mostra l'ús d'aquests selectors:

  • li[class^="a"] selecciona qualsevol valor d'atribut que comença amb a; és a dir, selecciona els dos primers elements de la llista.
  • li[class$="a"] selecciona qualsevol valor d'atribut que acaba amb a; és a dir, selecciona el primer i el tercer elements de la llista.
  • li[class*="a"] selecciona qualsevol valor d'atribut en què a apareix en alguna part de la cadena, de manera que selecciona tots els elements de la nostra llista.

Distinció entre majúscules i minúscules

Si vols seleccionar els valors d'atribut tant si estan escrits en majúscules com en minúscules, pots utilitzar el valor i abans del claudàtor de tancament. Aquest indicador informa el navegador que els caràcters ASCII han de coincidir independentment de si les lletres són majúscules o minúscules. Sense aquest indicador, la correspondència entre els valors es farà segons les directrius del llenguatge del document pel que fa a la distinció entre majúscules i minúscules; en el cas de l'HTML, distingeix entre majúscules i minúscules.

En l'exemple següent, el primer selector coincideix amb un valor que comença per a; només coincideix el primer element de la llista perquè els altres dos elements de la llista comencen amb una A majúscula. El segon selector no distingeix entre majúscules i minúscules, així que la correspondència és entre tots els elements de la llista.

Nota: També hi ha un valor s més recent, que imposa la coincidència de majúscules i les minúscules en contextos en què normalment no es dona; tanmateix, aquest valor encara no té gaire compatibilitat amb els navegadors i no resulta gaire útil en el context de l’HTML.

Intenta-ho

En l'exemple en directe següent, afegeix selectors d'atribut CSS per fer el següent:

  • Selecciona l’element <a> que té un atribut title i aplica-hi una vora de color rosa (border-color: pink).
  • Selecciona l’element <a> que té un atribut href amb un valor que conté la paraula contact en algun lloc i aplica-hi una vora de color taronja (border-color: orange).
  • Selecciona un element <a> que té un valor href que comença amb https i aplica-hi una vora de color verd (border-color: green).

Nota: Dona un cop d'ull a la solució aquí, però tracta de descobrir-ho per tu mateix!

Propers passos

Ara que hem acabat amb els selectors d’atribut, pots avançar cap a l’article següent sobre les pseudoclasses i els pseudoelements.

En aquest mòdul

  1. La cascada i l'herència
  2. Els selectors CSS
  3. El model de caixes
  4. Fons i vores
  5. El tractament del text en diverses direccions
  6. El desbordament dels continguts
  7. Els valors i les unitats
  8. Dimensionar elements en CSS
  9. Imatges, mèdia i elements de formulari
  10. Aplicar estil a les taules
  11. Depura el teu CSS
  12. Organitza el teu CSS