Selectors CSS

This translation is incomplete. Please help translate this article from English

Al CSS, els selectors s'utilitzen per orientar els elements HTML de les pàgines web que volem dissenyar. Hi ha una gran varietat de selectors CSS disponibles, que permeten obtenir una precisió àmplia a l’hora de seleccionar elements per dissenyar. En aquest article i els seus subarticles s'explicaran els diferents tipus detalladament i veurem 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 una idea de com funciona el CSS (mira Primers passos amb CSS).
Objectiu: Conèixer com funcionen els selectors CSS en detall.

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 per tenir els valors de propietat CSS dins de la regla que se’ls aplica. L'element o elements seleccionats pel seleccionador s'anomenen el subjecte del selector.

Algun codi amb h1 ressaltat.

En articles anteriors, vas conèixer alguns selectors diferents i que hi ha selectors que orienten el document de maneres diferents (per exemple, seleccionant un element com h1, o una classe com .special).

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

Llistes de selectors

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

h1 { 
  color: blue; 
} 

.special { 
  color: blue; 
} 

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 trobar que els selectors siguin més llegibles si cada un està en una línia nova.

h1, 
.special {
  color: blue; 
} 

A l'exemple en directe següent, intenta combinar els dos selectors que tinguin declaracions idèntiques. La visualització hauria de ser la mateixa després de combinar-les.

 

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

En l'exemple següent, la regla del selector de classe no vàlida serà ignorada, mentre que amb h1 no hi haurà problemes a l'hora de donar-li estil.

h1 { 
  color: blue; 
} 

..special { 
  color: blue; 
} 

Tanmateix, en combinar-los, ni h1 ni la classe es dissenyaran ja que la regla 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. Als subartícules d’aquest article examinarem amb més detall els diferents grups de selectors.

Selectors de tipus, classe i 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 en funció de la presència d’un determinat atribut en un element:

a[title] { }

O fins i tot fer una selecció en funció de 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 pseudoclasses, que donen estil a certs estats d’un element. La pseudoclasse :hover, per exemple, selecciona un element només quan es passa per damunt amb el ratolí:

a:hover { }

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

p::first-line { }

Combinadors

El grup final de selectors combina altres selectors per delimitar els elements dels nostres documents. A continuació, per exemple, es seleccionen els paràgrafs que són fills directes dels elements <article> mitjançant 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 continuar en ordre i descobrir els tipus, les classes i els selectors ID.

Taula de referència dels selectors

La taula següent t'ofereix una visió general dels selectors que tens disponibles per utilitzar, juntament amb enllaços a les pàgines d’aquesta guia que et mostrarà com utilitzar cada tipus de selector. També hem inclòs un enllaç a la pàgina MDN de cada selector on pots consultar la informació de suport del navegador. Pots fer-ho servir com a referència per tornar-ho a buscar quan més endavant hagis de buscar selectors o com experimentar 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 ID #unique { } Selectors ID
Selector d'atribut a[title] {  } Selectors d'atribut
Selectors de pseudoclasses p:first-child { } Pseudoclasses
Selectors de pseudoelements 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 ascada i l'herència
  2. Selectors CSS
  3. El model de caixa
  4. Fons i vores
  5. El maneig de diferents direccions de text
  6. El contingut que es desborda
  7. Els valors i les unitats
  8. Dimensionar elements en CSS
  9. Imatges, media i els elements de formulari
  10. Donar estil a les taules
  11. Depurar el CSS
  12. Organitzar el teu CSS