Дзіцячы селектар у CSS

Няхай у нас ёсць наступны код:

html<p>
  тэкст <b><i>тлусты курсіў</i></b>
</p>
<p>
  тэкст <i>проста курсіў</i>
</p>

Няхай мы хочам выбраць усе тэгі i, якія з'яўляюцца нашчадкамі абзацаў. Зробім гэта:

cssp i {
  color: red;
}

Вынік выканання кода:

Давайце цяпер выбяром тыя тэгі i, якія з'яўляюцца непасрэднымі нашчадкамі нашых абзацаў. У гэтым нам дапаможа даччыны селектар >.

Каб зразумець, як ім карыстацца, давайце параўнаем яго з селектарам нашчадкаў. Вось так: p i - мы выбярам усе курсівы ўнутры абзацаў, а вось так: p > i - толькі курсівы, якія з'яўляюцца непасрэднымі нашчадкамі абзацаў.

Давайце прымянім гэты селектар да нашага HTML кода:

cssp > i {
  color: red;
}

Вынік выканання кода:

html<ul>
  <li>
    <i>курсіў</i>
    <b>тлусты</b>
    <b><i>тлусты курсіў</i></b>
  </li>
  <li>
    <i>курсіў</i>
    <b>тлусты</b>
    <b><i>тлусты курсіў</i></b>
  </li>
</ul>