Child-selektorer i CSS

Lad os have følgende kode:

html<p>
  tekst <b><i>fed kursiv</i></b>
</p>
<p>
  tekst <i>bare kursiv</i>
</p>

Lad os sige, at vi vil vælge alle i-tags, der er efterkommere af afsnit. Lad os gøre det:

cssp i {
  color: red;
}

Resultatet af koden:

Lad os nu vælge de i-tags, der er direkte efterkommere af vores afsnit. Child-selectoren > vil hjælpe os med dette.

For at forstå, hvordan man bruger den, lad os sammenligne den med afstamningsselektoren. Sådan her: p i - vi vil vælge al kursiv tekst inde i afsnit, og sådan her: p > i - kun kursiv tekst, der er direkte efterkommere af afsnit.

Lad os anvende denne selector på vores HTML-kode:

cssp > i {
  color: red;
}

Resultatet af koden:

html<ul>
  <li>
    <i>kursiv</i>
    <b>fed</b>
    <b><i>fed kursiv</i></b>
  </li>
  <li>
    <i>kursiv</i>
    <b>fed</b>
    <b><i>fed kursiv</i></b>
  </li>
</ul>