Пусть у нас есть следующий код:
<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.