Selectors CSS: Què són i quins tipus hi ha?

Els selectors identifiquen un element general o particular del document XHTML al qual se li aplicarà la regla d'estil.

Els selectors poden ser de quatre tipus: selectors XHTML, selectors id, selectors class i el selector universal.

SELECTORS XHTML

El selectors de tipus XHTML identifiquen un determinat element de l'XHTML. Alguns exemples de selectors XHTML són:

p {
color: red;
}

El selector p s'associa a l'etiqueta , és a dir, a tots els paràgrafs del document XHTML.

SELECTORS ID

Especifiquen un determinat element del document XHTML que conté el valor de l'atribut id.

Veieu el següent exemple:

<h1 id="principal">Introducció a Lorem Ipsum</p>
'etiqueta <h1> conté l'atribut id de valor "vermell". L'especificació del selector es correpondria amb:

#principal {
color: red;
}

És a dir, es pren el valor de l'atribut id i se li afegeix al començament el caràcter #.

SELECTOR CLASS

Especifiquen un determinat element del document XHTML que conté un atribut del tipus class.

Veieu el següent exemple:

<p class="ciutats">Barcelona</p>

Si es vol aplicar un determinat estil a la classe "ciutats", s'utilitzarà el valor de l'atribut class afegint-li al davant el caràcter .

.ciutats {
color: red;
}

Es poden combinar diferents classes en un mateix element XHTML:

<p class="ciutats europa" >Barcelona </p >

i aplicar a cadascuna una regla diferent:

.ciutats {
color: red;
}

.europa {
font-size: 13px;
}

SELECTORS UNIVERSAL

El selector universal engloba a tots els elements del document XHTML. Es representa amb el caràcter d'asterisc: *.

* {
font-size: 13px;
font-family: verdana;
}

En aquest exemple, tots els elements del document tindran una mida de la font de 13 píxels i la font de lletra correspondrà a la família Verdana.

Més informació sobre Selectors: CSS en català