De aanliggende sibling selector

In het vorige hoofdstuk hebben we de algemene sibling selector besproken. Deze selecteert alle siblings van een element die na het element komen ("jonger zijn") in de HTML tekst. De aanliggende ("adjacent") sibling selector verengt de algemene sibling selector tot de eerste sibling die na het element komt in de tekst. Dit is misschien niet helemaal duidelijk, dus laten we meteen een voorbeeld geven:

<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>
	<p>Even more text here</p>
	<h2>Hello, world!</h2>
	<p>Text here as well...</p>
	<p>But no more!</p>
</div>

In dit voorbeeld gebruiken we de aanliggende sibling selector om de eerstvolgende alinea na elk H2 element in italic font (schuin gedrukt) weer te geven. Als we de algemene sibling selector uit het vorige hoofdstuk gebruikt hadden, dan zouden alle alinea's die na de H2 elementen komen in italic weergegeven zijn. We zien dat de syntaxis van de aanliggende sibling selector bijna hetzelfde is als van de algemene sibling selector, we hebben alleen de tilde (~) vervangen door het plus teken (+).

Zoals steeds, kan ook de aanliggende sibling selector samengesteld worden uit meer elementaire selectors. Zowel het deel voor de + als het deel daarna kan uit meerdere eenvoudigere selectors, van de types die we we eerder besproken hebben, samengesteld worden. Hier is een voorbeeld dat het laat zien. Het deel voor de + bevat de samengestelde ID selector "div#content", die voorouder is van de samengestelde class selector "h2.main". Het deel achter de + is simpelweg de element selector "p":

<style type="text/css">
div#content h2.main + p {
	font-style: italic;
	color: Blue;
}
</style>

<div id="content">
	<h1>Hello, world!</h1>
	<p>Some text here</p>
	<h2 class="main">Hello, world!</h2>
	<p>Some text here</p>
	<p>More text here</p>
	<h2>Hello, world!</h2>
	<p>Text here as well...</p>
</div>

n dit geval bestaat de selector uit twee delen gescheiden door het plus teken. In ieder deel kan je zo gedetailleerd worden als je maar wil.

Samenvatting

De sibling selector en de aanliggende sibling selector richten zich beide op kinderen van dezelfde ouder (siblings). De eerste richt zich op álle jongere siblings van een gegeven element (de siblings die in het document ná het gegeven element komen). De tweede selector richt zich alleen op de éérste jongere sibling, dat wil zeggen, op de aanliggende sibling.