Selektor dziecka w CSS

Załóżmy, że mamy następujący kod:

html<p>
  tekst <b><i>pogrubiona kursywa</i></b>
</p>
<p>
  tekst <i>zwykła kursywa</i>
</p>

Załóżmy, że chcemy wybrać wszystkie znaczniki i, które są potomkami akapitów. Zróbmy to:

cssp i {
  color: red;
}

Wynik wykonania kodu:

Spróbujmy teraz wybrać tylko te znaczniki i, które są bezpośrednimi dziećmi naszych akapitów. Pomóc nam w tym może selektor dziecka >.

Aby zrozumieć, jak go używać, porównajmy go z selektorem potomków. O tak: p i - wybierzemy wszystkie kursywy wewnątrz akapitów, a tak: p > i - tylko kursywy, które są bezpośrednimi dziećmi akapitów.

Zastosujmy ten selektor do naszego kodu HTML:

cssp > i {
  color: red;
}

Wynik wykonania kodu:

html<ul>
  <li>
    <i>kursywa</i>
    <b>pogrubienie</b>
    <b><i>pogrubiona kursywa</i></b>
  </li>
  <li>
    <i>kursywa</i>
    <b>pogrubienie</b>
    <b><i>pogrubiona kursywa</i></b>
  </li>
</ul>