Детски селектор во CSS

Нека имаме следниов код:

html<p>
  text <b><i>bold italic</i></b>
</p>
<p>
  text <i>just italic</i>
</p>

Нека сакаме да ги избереме сите тагови i, кои се потомци на параграфи. Да го направиме ова:

cssp i {
  color: red;
}

Резултат од извршувањето на кодот:

Ајде сега да ги избереме оние тагови i, кои се непосредни потомци на нашите параграфи. Во ова ќе ни помогне детскиот селектор >.

За да разбереме како да го користиме, ајде да го споредиме со селекторот на потомци. Вака: p i - ќе ги избереме сите курзиви внатре во параграфите, а вака: p > i - само курзивите кои се непосредни потомци на параграфите.

Ајде да го примениме овој селектор на нашиот HTML код:

cssp > i {
  color: red;
}

Резултат од извршувањето на кодот:

html<ul>
  <li>
    <i>italic</i>
    <b>bold</b>
    <b><i>bold italic</i></b>
  </li>
  <li>
    <i>italic</i>
    <b>bold</b>
    <b><i>bold italic</i></b>
  </li>
</ul>