Дочерний селектор в 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>