CSS combinaties

1. child selector (direct kind) >

> : Selecteert alleen directe kinderen.

div > p {
  color: pink;
}

<div>
  <p>Dit is pink</p>   <!-- ja -->
  <section>
    <p>Dit is niet pink</p> <!-- nee -->
  </section>
</div>

2. adjacent sibling (directe buur) +

+: Selecteert het eerste element dat direct ná een ander element komt (zelfde parent).

h1 + p {
  color: green;
}

<h1>Titel</h1>
<p>groen</p>  <!-- ja -->
<p>niet groen</p> <!-- nee -->

3. general sibling (alle volgende broers/zusjes) ~

~: Selecteert alle volgende siblings, niet alleen de eerste.

h1 ~ p {
  color: purple;
}

<h1>Titel</h1>
<p>paars</p>
<p>ook paars</p>
<div></div>
<p>nog steeds paars</p>