Dceřiný selektor v CSS

Předpokládejme, že máme následující kód:

html<p>
  text <b><i>tučná kurzíva</i></b>
</p>
<p>
  text <i>pouze kurzíva</i>
</p>

Předpokládejme, že chceme vybrat všechny tagy i, které jsou potomky odstavců. Udělejme to:

cssp i {
  color: red;
}

Výsledek provedení kódu:

Nyní vyberme pouze ty tagy i, které jsou přímými potomky našich odstavců. S tím nám pomůže dceřiný selektor >.

Abyste pochopili, jak jej používat, pojďme jej porovnat s selektorem potomků. Takhle: p i - vybereme všechny kurzívy uvnitř odstavců, ale takhle: p > i - pouze kurzívy, které jsou přímými potomky odstavců.

Aplikujme tento selektor na náš HTML kód:

cssp > i {
  color: red;
}

Výsledek provedení kódu:

html<ul>
  <li>
    <i>kurzíva</i>
    <b>tučný</b>
    <b><i>tučná kurzíva</i></b>
  </li>
  <li>
    <i>kurzíva</i>
    <b>tučný</b>
    <b><i>tučná kurzíva</i></b>
  </li>
</ul>