Нехай у нас є наступний код:
<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.