Secció 2: Selectors

2. Selectors de classe

Els selectors de classe (class selectors) permeten definir diferents estils per a un mateix element, o bé estils que poden ser aplicats a qualsevol element. La idea és definir l'estil d'una determinada classe, i després indicar al document HTML quins elements pertanyen a aquesta classe.

Hi ha dos tipus de selectors de classe, els generals i els que són específics d'un element determinat.

Selectors de classe generals

Seleccionen qualsevol element de la classe donada. La sintaxi és escriure un punt seguit del nom de l'estil.

.vermell { color: red; }
.petit { font-size: 9px; }

A l'exemple anterior, qualsevol element (P, H1...) al qual assignem la classe "vermell" es representarà d'acord amb l'estil definit per la classe. De la mateixa manera, qualsevol element de classe "petit" tindrà una mida de font de 9 píxels.

Com s'ha de fer per assignar una classe a un element? Només cal afegir l'atribut class, el signe igual i, entre cometes, el nom de la classe corresponent. L'assignació de la classe foma part de l'HTML, per tant es fa en el codi HTML.

<P class="vermell">Aquest paràgraf és de la classe 'vermell'.</P>

Els noms de les classes han de constar només de caràcters alfanumèrics i guions (-). A més han de començar obligatòriament per una lletra.

Selectors de classe específics d'un element

A diferència dels anteriors són restrictius a l'element al qual s'apliquen. L'única diferència en la sintaxi és que cal afegir aquest element abans de la classe.

H1.vermell { color: red; }
P.petit { font-size: 9px; }

Això no vol dir que tots els H1 siguin vermells, sinó només els que siguin the classe 'vermell'.

I a la pàgina web assignem les classes als elements corresponents:

<H1 class="vermell">Aquest títol es representarà en vermell.</H1>
<P class="petit">Aquest paràgraf té una mida de font de 9px.</P>

En canvi no tindria cap efecte:

<H1 class="petit">Aquest títol no té estil associat.</H1>

La combinació coherent de selectors HTML i selectors de classe pot estalviar feina i simplificar el codi de l'style sheet. Per exemple, si volem tenir títols i paràgrafs amb diferents colors per la lletra a la nostra pàgina usarem un style sheet semblant a aquest:

H1 { font-family: Arial; }
P { font-family: Verdana; }

.blau { color: blue; }
.vermell { color: red; }
.verd { color: green; }

I escriurem un codi HTML com el següent:

<H1>Aquest títol es representarà en negre (color per defecte).</H1>
<H1 class="blau">Aquest en blau.</H1>
<H1 class="vermell">I aquest en vermell.</H1>
<P class="vermell">Aquest paràgraf és de color vermell (reutilitzo el selector de classe 'vermell'!).</P>
<P class="blau">I aquest serà blau.</P>
<P>I tots els H1 es representaran amb font Arial, mentre que tots els paràgrafs ho faran amb Verdana.</P>

Aquest seria el resultat:

Nota: els selectors de classe tenen preferència sobre els selectors bàsics. Si a l'style sheet de l'exemple anterior afegim l'estil P.courier {font-family:"Courier New"}, quan a la pàgina web trobem el codi <P class="courier">, el paràgraf no es presentarà amb la font Verdana, sinó amb Courier New, que té preferència sobre l'especificada al selector bàsic.