Secció 2: Selectors

4. Selectors contextuals

Són semblants als selectors bàsics, però amb la diferència que seleccionem només aquells elements que estan continguts en un altre selector, és a dir, que en són descendents (pots recordar el concepte d'element descendent a l'apartat 6 de la Secció 1, 'Element pare, element fill i herència'). Per exemple, podem seleccionar totes les negretes B que estiguin contingudes en un títol H1.

La sintaxi és senzilla: primer indiquem l'element pare i a continuació, separat per un espai, l'element que volem seleccionar.

H1 B { font-weight: bold; color: red; }

Només les negretes que siguin descendents d'un element H1 seran de color vermell. Fixa't que primer indiquem l'element contenidor i després l'element contingut, que és el que seleccionem.

Vegem l'style sheet anterior en un exemple concret:

<H1>Títol amb un <B>element B</B></H1>
<P>Paràgraf amb un <B>element B</B></P>

L'exemple anterior és un dels usos més clars de selectors contextuals. Els títols ja es presenten en negreta per defecte, així que utilitzar-hi l'element B no produeix cap resultat amb HTML 'normal'. Però sí podem redefinir la seva aparença amb els selectors contextuals, en aquest cas de color vermell.

A l'especificació CSS2 els selectors contextuals es rebatejaren com a selectors descendents.

Els selectors contextuals poden barrejar-se amb selectors de classe i, de fet, amb altres tipus de selector, com els de pseudoclasse que veurem al proper apartat. Per exemple:

P.comentari A
/* Selecciona els links continguts
   en paràgrafs de classe "comentari" */

.important B
/* Selecciona la negreta dels elements
   de classe "important" */

.codi .inacabat
/* Selecciona els elements de classe "inacabat"
   continguts en elements de classe "codi" */

P A B
/* Selecciona els elements B continguts
   en elements A que estiguin alhora
   continguts en elements P (uf!) */

P B .vermell { color: red; }

P B.vermell { color: blue; }