Gyermek szelektor a CSS-ben

Tegyük fel, hogy a következő kódunk van:

html<p>
  szöveg <b><i>félkövér dőlt</i></b>
</p>
<p>
  szöveg <i>csak dőlt</i>
</p>

Tegyük fel, hogy ki szeretnénk választani az összes i elemet, amelyek a bekezdések leszármazottai. Tegyük ezt meg:

cssp i {
  color: red;
}

A kód végrehajtásának eredménye:

Most válasszuk ki azokat a i elemeket, amelyek a bekezdéseink közvetlen leszármazottai. Ebben a gyermek szelektor > segít.

Ahhoz, hogy megértsük, hogyan kell használni, hasonlítsuk össze a leszármazott szelektorral. Így: p i - kiválasztjuk az összes dőlt betűt a bekezdéseken belül, de így: p > i - csak a bekezdések közvetlen leszármazottjai közül választja ki a dőlt betűket.

Alkalmazzuk ezt a szelektort a HTML kódunkra:

cssp > i {
  color: red;
}

A kód végrehajtásának eredménye:

html<ul>
  <li>
    <i>dőlt</i>
    <b>félkövér</b>
    <b><i>félkövér dőlt</i></b>
  </li>
  <li>
    <i>dőlt</i>
    <b>félkövér</b>
    <b><i>félkövér dőlt</i></b>
  </li>
</ul>