Selectors de tipus, classe i ID

En aquest article farem un cop d’ull als selectors més senzills que hi ha disponibles, i que probablement utilitzaràs més a l'hora de treballar.

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: Obtenir més informació sobre els diferents selectors CSS que podem utilitzar per a aplicar CSS a un document.

Selectors de tipus

A vegades, a un selector de tipus també se'l denomina selector de noms d'etiqueta o selector d'elements, perquè selecciona una etiqueta/element HTML al document. En l’exemple següent hem utilitzat selectors span, em i strong. Per tant, hem aplicat estil a totes les instàncies <span>, <em> i <strong>.

Afegeix una regla CSS que seleccioni l’element <h1> i en canviï el color pel blau.

El selector universal

El selector universal s'indica amb un asterisc (*) i selecciona tot el que hi ha dins del document (o dins de l'element pare, si s'encadena amb un altre element i un combinador descendent, per exemple). En l'exemple següent hem utilitzat el selector universal per a eliminar els marges de tots els elements. Això vol dir que, en lloc de l'estil predeterminat que hi afegeix el navegador, que deixa un espai de marge entre els títols d’encapçalament i els paràgrafs, tot està junt i no podem distingir els diferents paràgrafs amb facilitat.

Aquest tipus de comportament a vegades es pot veure en els «fulls d'estil de restabliment», que eliminen tot l'estil que aplica el navegador. Van ser molt populars en un moment determinat, tot i que eliminar tots els estils significava que aleshores havies de tornar-ho a fer tot! Per tant, acostumem a utilitzar el selector universal amb atenció per a afrontar situacions molt específiques, com la que es descriu a continuació.

Ús del selector universal per a facilitar la lectura

Un dels usos del selector universal és fer els selectors més fàcils de llegir i més evidents, en termes de què fan. Per exemple, si vull seleccionar el primer fill de qualsevol element <article>, independentment de quin element sigui, i posar-lo en negreta, podem utilitzar el selector :first-child, que veurem amb més detall en l’article sobre pseudoclasses i pseudoelements, com un selector descendent juntament amb el selector d'elements <article>:

article :first-child {

}

Això es pot confondre, però, amb article:first-child, que selecciona qualsevol element <article> que sigui el primer fill d'un altre element.

Per evitar aquesta confusió, podem afegir al selector :first-child el selector universal, de manera que ara resulta obvi el que fa el selector. Selecciona qualsevol element que sigui el primer fill d'un element <article>:

article *:first-child { 

} 

Selectors de classe

El selector de classe s’inicia amb un caràcter de punt (.) i selecciona qualsevol element del document que tingui aplicada la classe seleccionada. En l'exemple en directe següent hem creat una classe anomenada .highlight i l'hem aplicada a diversos llocs del document. Es ressalten tots els elements que tenen aplicada aquesta classe.

Seleccionar classes en elements concrets

Pots crear un selector que seleccioni els elements específics que tenen aplicada aquella classe. En l'exemple següent, destaquem un element <span> que té una classe highlight diferent de la d’un títol d’encapçalament <h1> amb una classe highlight. Ho fem adjuntant la classe al selector de tipus per a l’element que volem seleccionar, sense cap espai entremig.

Aquesta manera de seleccionar dificulta la reutilització de CSS, perquè la classe només s'aplica a aquest element en concret, i hauràs d'afegir un altre selector si decideixes que les regles s'han d'aplicar també a altres elements.

Seleccionar un element si té aplicada més d'una classe

Pots aplicar diverses classes a un element i seleccionar-les individualment, o bé seleccionar l'element només quan inclou totes les classes del selector. Això pot ser útil per a crear components que es poden combinar de maneres diferents al teu lloc web.

En l'exemple següent hi ha un element <div> que inclou una nota. La vora gris s'aplica quan la casella té una classe notebox. Si també té una classe warning o danger, el border-color canvia.

Podem dir-li al navegador que només volem fer coincidir l’element si té totes aquestes classes tot encadenant-les juntes sense espais entremig.

Selectors d’ID

Un selector d’ID comença amb un caràcter # en lloc d'un caràcter de punt, però s'utilitza bàsicament de la mateixa manera que un selector de classe. Ara bé, un element ID només es pot utilitzar una vegada en cada document. El selector pot seleccionar l’element que té l’id establert i també pots precedir l'identificador amb un selector de tipus que seleccioni l’element només si coincideix amb l'ID. Pots veure aquests dos usos en l'exemple següent:

Nota: Tal com hem après en l’article que parla d'especificitat, un ID té més especificitat i anul·la la majoria dels altres selectors. Això pot dificultar les coses a l'hora de treballar. En la majoria dels casos és preferible afegir una classe a l'element, en lloc d'utilitzar un ID, però a vegades fer servir un ID és l'única manera de seleccionar l'element (potser perquè no es té accés al codi d’etiquetatge i, per tant, no es pot editar).

En el proper article

Continuarem explorant els selectors i veurem els selectors d’atribut.

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, media i elements de formulari
  10. Aplicar estil a les taules
  11. Depurar el CSS
  12. Organitza el teu CSS