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 tres tipus: selectors XHTML, selectors id
i selectors class
.
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 <p>
, és a dir, a tots els paràgrafs del document XHTML. Segons aquesta regla, tots els paràgrafs del document apareixeran de color vermell (color: red;
). Un altre exemple:
h1 { color: green; }
El selector h1
s'associa a l'element <h1>
(capçalera de primer nivell) del document XHTML. Segons aquesta regla, totes les capçaleres de primer nivell del document apareixeran de color verd (color: green;
).
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>
L'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 #
.
Un segon exemple que es veurà amb molta freqüència és:
<div id="contingut"> <h1>...</h1> <p>....</p> <p>...</p> </div>
S'identifica una divisió o part estructural del document mitjançant la meta etiqueta de bloc <div>
i se li afegeix un atribut id
, de valor "contingut"
.
class
Especifiquen un determinat element del documento 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; }
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 tindràn una mida de la font de 13 píxels i la font de lletra correspondrà a la família Verdana.
Les pseudo-classes i els pseudo-elements tenen como a objectiu precisar un fragment (pseudo-classe) o establir una condició (pseudo-element) de l'element associat a la regla. Les pseudo-classes i pseudo-elements es declaren després del selector principal, separats pel símbol de puntuació: :
.
Veieu un primer exemple de l'ús de pseudo-classes:
p { font-size: 10px; } p:first-letter { font-size: 20px; }
S'han especificat dues regles per a l'element <p>
del document. La primera determina que la mida de la font dels paràgrafs ha de ser de 10 píxels. Contràriament, a la segona regla, el selector ve acompanyat d'un pseudo-element, first-letter
, que selecciona i modifica la mida d'una part de l'element, en aquest cas, la primera lletra de cada paràgraf.
Ara veieu un exemple de l'ús dels pseudo-elements:
a:hover { text-decoration: none; }
hover
és un pseudo-element, és a dir, estableix una condició de verdader/fals al selector: si el cursor passa per sobre de l'enllaç (element <a>
del document), la línia de base de l'enllaç desapareixerà (text-decoration:none
).
Al llarg dels següents mòduls s'aniran introduint més pseudo-elements i pseudo-classes que, com podreu comprovar, augmenten el control i precisió de la presentació del document.
És possible anidar diferents selectors amb el propòsit d'associar una regla CSS a un element específic del document XHTML. Cada selector està separat per un espai. Veieu un exemple:
#informacio p strong { color: red }
Els selectors anidats són #informacio
, p
i strong
. Per ordre de jerarquia, el primer element anidat conté al següent, i així successivament fins l'últim selector anidat.
Què significa aquesta regla de selectors anidats? Tots els continguts que que es troben entre les etiquetes <strong>...</strong>
que estiguin continguts en un paràgraf que, alhora, estiguin dins d'un element <div id="informacio">
, apareixeran de color vermell. Un exemple de codi XHTML per il·lustrar l'anterior:
<div id="informacio"> <p>Lorem ipsum <strong>és una expressió</strong></p> </div>