# Дочерний селектор в CSS

Пусть у нас есть следующий код:

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

Пусть мы хотим выбрать все теги `i`, являющиеся потомками абзацев. Сделаем это:

`p i { color: red; }`

Результат выполнения кода:

Давайте теперь выберем те теги `i`, которые являются непосредственными потомками наших абзацев. В этом нам поможет дочерний селектор `>`.

Чтобы понять, как им пользоваться, давайте сравним его с селектором потомков. Вот так: `p i` - мы выберем все курсивы внутри абзацев, а вот так: `p > i` - только курсивы, являющиеся непосредственными потомками абзацев.

Давайте применим этот селектор к нашему HTML коду:

`p > i { color: red; }`

Результат выполнения кода:

Дан следующий код:

`<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>`

Покрасьте в красный цвет только те теги `b`, которые являются непосредственными потомками тегов `li`.

← →
↑