Secció 2: Selectors

3. Selectors ID

Els selectors ID són molt semblants als selectors de classe. L'única diferència és que només fan referència a un sol element de la pàgina. Pots pensar-los com a 'selectors d'ús únic'. Igual que els selectors de classe, poden ser generals (és a dir, aplicables a qualsevol tipus d'element) o específics, i la sintaxi CSS és la mateixa però canviant el punt per un # (en anglès, sharp, per als músics 'diesi' ;). Per utilitzar-los a la pàgina web, enlloc de class farem servir l'atribut ID. L'atribut ID ha d'ésser únic en el document HTML. Per tant només un element individual tindrà un determinat ID, i és aquest element el que correspon al selector ID.

H1#titol1 { font-size: 20px; color: maroon; }
#especial { color: red; font-weight: bold; }

I al codi HTML farem l'assignació a l'element que vulguem que quedi afectat:

<H1 id="titol1">Aquest títol és granat i de mida 20px.</H1>
<P id="especial">Aquest paràgraf és especial (vermell i en negreta).</P>

Recordeu que no heu d'utilitzar els id "titol1" i "especial" enlloc més del document HTML.

Potser els selectors ID no semblin gaire útils; podríem fer el mateix amb selectors de classe, utilitzant-los només una vegada. No és aquest el moment de discutir la funció concreta dels selectors ID. Però per si algú hi té interès, diguem que des del punt de vista conceptual són més correctes quan volem marcar un element únic, i a més ens permetran fer referència a aquest element en altres contextos com ara JavaScript. De tota manera, al principi és probable que tingueu més que suficient amb els selectors de classe.