Dcérsky selektor v CSS

Majme nasledujúci kód:

html<p>
  text <b><i>tučné kurzíva</i></b>
</p>
<p>
  text <i>len kurzíva</i>
</p>

Povedzme, že chceme vybrať všetky elementy i, ktoré sú potomkami odsekov. Urobme to:

cssp i {
  color: red;
}

Výsledok vykonania kódu:

Poďme teraz vybrať tie elementy i, ktoré sú priamymi potomkami našich odsekov. S tým nám pomôže dcérsky selektor >.

Aby sme pochopili, ako ho používať, poďme ho porovnať s selektorom potomkov. Takto: p i - vyberieme všetky kurzívy vnútri odsekov, ale takto: p > i - iba kurzívy, ktoré sú priamymi potomkami odsekov.

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

cssp > i {
  color: red;
}

Výsledok vykonania 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>