Дъщерен селектор в 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>