De child selector

Omdat de descendant selector zich richt op ALLE kinderen, kleinkinderen, achterkleinkinderen, enz., van een of meer elementen, is het een zeer machtig stijlmiddel, zoals we gezien hebben in het vorige hoofdstuk. Maar het kan ook te machtig zijn, omdat we soms alleen "directe" kinderen - en geen latere generaties - willen selecteren. Gelukkig verschaft CSS ons ook een child (kind) selector, die zich alleen richt op kinderen.

We hadden in het vorige hoofdstuk een voorbeeld waarin <b> tags geselecteerd werden, beginnend bij de kinderen van een <div>, de hele hiërarchie naar beneden door, tot de laatste afstammeling. Dit werd gedaan met een descendant selector. Voor de duidelijkheid komt dit voorbeeld hier nog een keer:

<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>

De syntax voor de "direct child selector" vereist een simpele aanpassing. In plaats van een spatie tussen voorouder en afstammeling hebben we nu het groter dan teken (>) tussen ouder ("parent") en kind ("child"). Het > teken mag omgeven worden door één of meer spaties.

parent > child

In het bovenstaande voorbeeld hoeven dus alleen maar een spatie tussen "div.highlighted" en "b" te vervangen door > (eventueel omgeven met spaties). Het netto effect is dat in plaats van alle afstammelingen, alleen directe kinderen beïnvloed worden. Om het effect duidelijk te illustreren is het voorgaande voorbeeld uitgebreid met een tweede direct kind:

<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>
	<b>Level 0 again...</b>
</div>

Je ziet dat inderdaad alleen de directe kinderen van de ouder blauw worden.

Uiteraard kan je de selector uitbreiden, zowel met descendant selectors als met child selectors. In plaats van ergens in een hiërarchische boom tot de laatste uiteindes toe te selecteren - zoals de descendant selector dat doet - kunnen we een sub-boom selecteren door herhaald toepassen van de child selector, zoals in het volgende voorbeeld:

<style type="text/css">
div.highlighted > ul > li > a {
	color: DarkOrange;
}
</style>

<div class="highlighted">
	<ul>
		<li><a href="#">List Link 1</a></li>
		<li><a href="#">List Link 2</a></li>
		<ul>
			<li><a href="#">List Link 2.1</a></li>
		</ul>
		<li><a href="#">List Link 3</a></li>
	</ul>
</div>

We hebben hier de selector veel specifieker gemaakt dan eerder. In plaats van ons te richten op alle links <a> binnen de ".highlighted div" of op links die kinderen zijn van alle <li> tags, richten we ons op links die slechts één niveau diep in de buitenste unordered ("ongeordende") lijst <ul> voorkomen. De <a> tag in de lijst binnen de lijst ("List Link 2.1") is dieper in de hiërarchie en wordt uitgesloten, hoewel het wel een kind is van een <li>, die zelf een kind is van een <ul>. Deze uitsluiting is omdat deze laatste <ul> tag geen direct kind is van de ".highlighted div".

Samenvatting

De child selector is een meer specifieke versie van de descendant selector. Maar dat neemt niet weg dat hij zeer krachtig is. In de praktijk zal je beide selectors vaak met vrucht kunnen toepassen in je CSS code.