En el {{Glossary("CSS")}}, els selectors s'utilitzen per a determinar els elements {{glossary("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. |
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.
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.
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 viu següent, combina els dos selectors que tenen declaracions idèntiques. La visualització hauria de ser la mateixa després de la combinació.
{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}
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-les, no s’aplicarà estil ni a h1 ni a la classe, perquè la regla ja no és vàlida.
h1, ..special {
color: blue;
} 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.
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 { }
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"] { }
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 { }
El grup final de selectors fa combinacions d’altres selectors que delimiten encara més els elements dels nostres documents. A continuació, per exemple, se seleccionen els paràgrafs que són fills directes dels elements <article> amb el combinador de fills (>):
article > p { }
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.
{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
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 |