Selectors CSS

En el CSS, els selectors s'utilitzen per a determinar els elements HTML de les pàgines web als quals volem aplicar estil. Hi ha una gran varietat de selectors CSS disponibles, que permeten obtenir una precisió àmplia a l’hora de seleccionar elements per a aplicar-los estil. En aquest article i els seus subarticles s'explicaran els diferents tipus amb detall i observarem com funcionen.

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 (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu: Conèixer amb detall com funcionen els selectors CSS.

Què és un selector?

Ja has conegut els selectors. Un selector CSS és la primera part d'una regla CSS. Es tracta d’un patró d’elements i d’altres termes que diuen al navegador quins elements HTML s’han de seleccionar perquè tinguin els valors de les propietat CSS segons la regla que se’ls ha d’aplicar. L'element o els elements que selecciona el selector s'anomenen el subjecte del selector.

Una mica de codi amb un h1 ressaltat.

En articles anteriors, has vist altres selectors i també que hi ha selectors que es focalitzen en el document de maneres diferents (per exemple, seleccionant un element com h1, o una classe com .special).

En CSS, els selectors es defineixen en l’especificació dels selectors CSS; com qualsevol altra part del CSS, han de ser compatibles amb els navegadors perquè funcionin. La majoria de selectors que trobaràs es defineixen en l’especificació de selectors de nivell 3, que és una especificació madura i, per tant, trobaràs una compatibilitat de navegadors excel·lent per a aquests selectors.

Llistes de selectors

Si tens més d'un element que utilitza el mateix CSS, cadascun dels selectors es poden combinar en una llista de selectors que aplica la mateixa regla a tots els selectors. Per exemple, si tenim el mateix CSS per a h1 i també per a una classe .special, ho podríem escriure com dues regles separades.

h1 { 
  color: blue; 
} 

.special { 
  color: blue; 
} 

Però també podem combinar-los en una llista de selectors, afegint-hi una coma entre ells.

h1, .special { 
  color: blue; 
} 

L’espai en blanc és vàlid tant abans com després de la coma. També pots decidir que la llegibilitat dels selectors és més bona si cada un està en una línia nova.

h1, 
.special {
  color: blue; 
} 

En l'exemple en directe següent, combina els dos selectors que tenen declaracions idèntiques. La visualització hauria de ser la mateixa després de la combinació.

Si agrupes els selectors d'aquesta manera, i algun dels selectors no és vàlid, s'ignorarà tota la regla.

En l'exemple següent, la regla del selector de classe no vàlida s’ignorarà mentre que no hi haurà problemes a l'hora d’aplicar estil a h1.

h1 { 
  color: blue; 
} 

..special { 
  color: blue; 
} 

Tanmateix, en combinar-los, no s’aplicarà estil ni a h1 ni a la classe, perquè la regla ja no és vàlida.

h1, ..special { 
  color: blue; 
} 

Tipus de selectors

Hi ha uns quants grups diferents de selectors, i conèixer quin tipus de selector necessites t'ajudarà a trobar l'eina adequada a l'hora de treballar. En els subarticles d’aquest article examinarem amb més detall els diferents grups de selectors.

Selectors de tipus, de classe i d’ID

Aquest grup inclou selectors que delimiten un element HTML, com ara <h1>.

h1 { }

També inclou selectors que delimiten una classe:

.box { }

o un ID:

#unique { }

Selectors d'atribut

Aquest grup de selectors t'ofereix diferents maneres de seleccionar elements segons la presència d’un atribut determinat en un element:

a[title] { }

O fins i tot fer una selecció segons la presència d’un atribut amb un valor determinat:

a[href="https://example.com"] { }

Les pseudoclasses i els pseudoelements

Aquest grup de selectors inclou les pseudoclasses, que apliquen estil a certs estats d’un element. La pseudoclasse :hover, per exemple, selecciona un element només quan hi passa pel damunt el cursor del ratolí:

a:hover { }

També inclou els pseudoelements, que seleccionen una part determinada d’un element en lloc de l’element en si. Per exemple, ::first-line sempre selecciona la primera línia de text que hi ha dins d’un element (<p> en el cas següent), i actua com si un <span> delimités la primera línia amb format i després la seleccionés.

p::first-line { }

Combinadors

El grup final de selectors fa combinacions d’altres selectors que delimiten encara més els elements dels nostres documents. A continuació, per exemple, es seleccionen els paràgrafs que són fills directes dels elements <article> amb el combinador de fills (>):

article > p { }

Propers passos

Pots donar un cop d'ull a la taula de referència de selectors que hi ha a continuació per trobar enllaços directes als diversos tipus de selectors de la secció d'aprenentatge o de MDN en general, o pots continuar en ordre i descobrir els tipus de selectors de classe i d’ID.

Taula de referència dels selectors

La taula següent t'ofereix una visió general dels selectors que tens disponibles, juntament amb enllaços a les pàgines d’aquesta guia, que et mostraran com utilitzar cada tipus de selector. També hem inclòs un enllaç a la pàgina MDN de cada selector, en què pots consultar la informació de compatibilitat amb els navegadors. Pots fer-ho servir com a referència de consulta per quan més endavant hagis de buscar selectors, o a mesura que experimentes amb el CSS en general.

Selector Exemple Tutorial de CSS
Selector de tipus h1 { } Selectors de tipus
Selector universal * { } El selector universal
Selector de classe .box { } Selectors de classe
Selector d’ID #unique { } Selectors d’ID
Selector d'atribut a[title] { } Selectors d'atribut
Selectors de pseudoclasse p:first-child { } Pseudoclasse
Selectors de pseudoelement p::first-line { } Pseudoelements
Combinador descendent article p Combinador descendent
Combinador de fills article > p Combinador de fills
Combinador de germans adjacents h1 + p Germans adjacents
Combinador general de germans h1 ~ p Germans general

En aquest mòdul

  1. La cascada i l'herència
  2. 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, media i elements de formulari
  10. Aplicar estil a les taules
  11. Depurar el CSS
  12. Organitza el teu CSS