De sibling selector

We hebben gezien hoe kinderen en kleinkinderen, enz,, geselecteerd kunnen worden met een descendant selector, maar wat nu als we ons willen richten op broers en zussen ("siblings") van een element, dat wil zeggen op elementen die directe kinderen zijn van dezelfde ouder? CSS heeft een stel selector types voor dat en in dit hoofdstuk zullen we de algemene sibling ("broers en zussen") selector bekijken.

De algemene sibling selector begint met de naam van een element dat een kind is van zekere ouder, dan volgt het tilde (~) teken en de selector wordt beëindigd met de naam van een sibling (kind van dezelfde ouder). De laatste naam is het doel van de stijlregel die volgt op de selector. Het element vóór de tilde kan in de HTML tekst vele siblings van dezelfde naam hebben, sommige van deze verschijnen in de HTML tekst boven het element ( "oudere" siblings) en andere staan in de tekst onder het element ("jongere" siblings). De stijlregel beïnvloedt alleen jongere siblings, die dus in de HTML tekst ná het element komen.

<style type="text/css">
h2 ~ p {
	font-style: italic;
}
</style>

<div id="content">
	<h1>Hello, world!</h1>
	<p>Some text here</p>
	<h2>Hello, world!</h2>
	<p>Some text here</p>
	<p>More text here</p>
</div>

Alle elementen binnen de div met ID="content" zijn kinderen van deze div. Als kinderen van dezelfde ouder, zijn zij siblings van elkaar. De selector stelt dat die siblings van een h2 element, die tevens <p> (alinea) element zijn, geselecteerd worden, en dus de italic fontstijl krijgen. Echter alleen de "jongere" siblings worden geselecteerd, dat wil zeggen dat de laatste twee alinea's - en niet de eerste - in italic worden weergegeven. In het volgende voorbeeld zien we dat <p> kleinkinderen niet geselecteerd worden:

<style type="text/css">
h2 ~ p {
	font-style: italic;
}
</style>

<div id="content">
	<h1>Hello, world!</h1>
	<p>Some text here</p>
	<h2>Hello, world!</h2>
	<p>Some text here</p>
	<div>
		<p>More text here</p>
	</div>
</div>

Merk op dat de alinea binnen de tweede div niet beïnvloed is, omdat het geen kind is van de buitenste div en dus geen sibling is van de h2 tag.

Samenvatting

De algemene sibling selector richt zich op elementen die kinderen zijn van dezelfde ouder. Dat kunnen echter heel veel elementen zijn, want een ouder kan onbeperkt veel kinderen van dezelfde naam (zelfde tag) hebben. Met de adjacent ("naastliggende") selector, die we in het volgende hoofdstuk zullen bespreken, kunnen we de selectie beperken tot naaste buur siblings.