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;).
idEspecifiquen 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".
classEspecifiquen 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>