De descendant selector

Tot dusverre hebben we alleen selectors toegepast die elementen met een zekere naam, class, of ID selecteerden. In het bijzonder is de selectie van elementen met zekere naam, zoals <a> of <img>, zeer nuttig. Maar wat nu als je de selectie wil beperken tot elementen die alleen voorkomen in een specifiek deel van je webpagina? Dan komen combinators in beeld die je selectie beperken tot elementen met zekere positie in de HTML-DOM boom, dat wil zeggen dat je de plaatsing van elementen in de hiërarchie gebruikt om de lijst van geselecteerde elementen te bekorten.

In dit hoofdstuk zullen we de descendant selector ("afstammeling selector") bekijken. Deze stelt je in staat om je te beperken tot elementen die afstammeling (descendant) zijn van een ander element. De syntaxis is erg eenvoudig, je geeft de naam van de parent (ouder), één of meer spaties, en dan de naam van het element dat je eigenlijke doel is. Hier volgt een voorbeeld:

<style type="text/css">
p b {
	color: Blue;
}
</style>

<p>Hello, <b>world</b> - what a <b>beautiful</b> day!</p>

Hello, <b>world</b> - what a <b>beautiful</b> day!

In dit voorbeeld willen we vetgedrukte tekst blauw maken, maar alleen als het behoort tot een alinea ("paragraph") gedefinieerd met <p> ... </p>. Je ziet in het voorbeeld dat er vier <b> tags voorkomen, de eerste twee binnen een paragraph element - ze zijn kinderen van <p> - en de laatste twee tags zijn niet ingesloten door paragraph tags. De inhouden van de eerste twee bold tags zijn blauw dankzij onze descendant selector. De inhouden van de laatste twee bold tags hebben de default kleur zwart.

Dit is natuurlijk een erg eenvoudig voorbeeld, maar denk aan het grotere plaatje. Je kan bijvoorbeeld heel gemakkelijk de kleur van alle links in je hoofdmenu ("main menu") wijzigen zonder dat je die links een eigen class attribuut geeft (of nog moeizamer, één voor één selecteert).

Uiteraard kan je je selectors op de gebruikelijke manier aanpassen door ze uit te breiden met specifieke classes en/of ID's, zoals in dit voorbeeld:

<style type="text/css">
p.highlighted b {
	color: Blue;
}
</style>

<p class="highlighted">Hello, <b>world</b> - what a <b>beautiful</b> day!</p>

<p>Hello, <b>world</b> - what a <b>beautiful</b> day!</p>

De selector "p.highlighted b" richt zich alleen op bold ("vet gedrukte") elementen (<b>) die afstammeling ("descendant") zijn van alinea's (<p>) met class attribuut "highlighted".

Een afstammeling hoeft geen direct kind te zijn.

Met de descendant selector moet je er aan denken dat niet alleen "directe" kinderen geselecteerd worden maar ook kinderen van kinderen (kleinkinderen), achterkleinkinderen, en zo verder. Afstammelingen worden geselecteerd de hele hiërarchie langs naar beneden. Dit voorbeeld brengt dit goed in beeld:

<style type="text/css">
div.highlighted b {
	color: Blue;
}
</style>

<div class="highlighted">
	<b>Level 0...</b>
	<div>
		<b>Level 1...</b>
		<div>
			<b>Level 2...</b>
		</div>
	</div>
</div>

We selecteren hier bold elementen die afstammeling zijn van de buitenste <div> met class attribuut "highlighted". Als je dit voorbeeld uitprobeert dan zie je dat ook de bold elementen die in verschillende lagen van <div> tags ingepakt zijn ook blauw weergegeven worden. Ook die diep geneste bold elementen zijn descendants van de buitenste div. Als je alleen de kleur van directe kinderen wil wijzigen, moet je de child ("kind") selector gebruiken. Hier komen we op terug.

Samenvatting

De syntaxis van de descendant selector is uiterst simpel - begin met de parent selectors, dan één of meer spaties, en eindig met de selector van het beoogde element. Hoewel deze syntaxis eenvoudig is, is de descendant selector toch een zeer krachtig stuk gereedschap. Hopelijk heb je, op dit punt in de cursus aangekomen, dat al begrepen, maar zo niet, lees rustig verder, er komt nog veel meer over de toepassingsmogelijkheden van de geavanceerde CSS selectors.