тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

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

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

<p> текст <b><i>жирный курсив</i></b> </p> <p> текст <i>просто курсив</i> </p>

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

p i { color: red; }

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

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

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

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

p > i { color: red; }

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

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

<ul> <li> <i>курсив</i> <b>жирный</b> <b><i>жирный курсив</i></b> </li> <li> <i>курсив</i> <b>жирный</b> <b><i>жирный курсив</i></b> </li> </ul>

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