Een ajedaket sibli selektar ?? WTF

Een moeilijke combinatie van woorden voor een héél simpele situatie. Het betreft een element dat onmiddelijk op een ander volgt en dezelfde parent ( ouder-element ) heeft. De manier om een adjacent sibling selector aan te geven in CSS is:


p + p {
font-size: smaller;
}

Let op de spatie tussen de elementen en het plusteken (+), je kan het met of zonder spatie doen, het werkt op alle 2 manieren

In voorgaand voorbeeld zal enkel een tekst die in een <p> zit en die direct volgt op een <p> kleiner worden.

Voorbeeld HTML


<div>
<p>deze tekst zal normaal zijn</p>
<p>Deze tekst zal kleiner zijn</p>
</div>

Voordelen van deze situatie

Je HTML kan minder class en/of id bevatten = minder kB = minder download = minder bandbreedte.

Minder class en/of id ?

Stel je hebt na een <h1> een <h2> en je wilt nu telkens als deze 2 op elkaar volgen een andere style als dan dat de <h2> alleen zou zijn.
Nu kan je een class en/of id aan de <h2> toevoegen of gewoon gebruik maken van de adjacent sibling selector situatie.

Update: zat eventjes in de war, is aangepast, dank Arjan