Дочірній селектор у CSS

Дочірній селектор у CSS

Дочірній селектор дозволяє вибирати лише безпосередніх дочірніх елементів. На відміну від селектора нащадків, він не вибирає елементи, які знаходяться глибше в ієрархії.

Розглянемо наступний HTML-код:

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

<p>
  text <i>just italic</i>
</p>

Якщо використати селектор нащадків, будуть вибрані всі теги i, що знаходяться всередині тегів p, незалежно від рівня вкладеності.

p i {
  color: red;
}

У цьому випадку червоними стануть обидва теги i.

Щоб вибрати лише ті теги i, які є безпосередніми дочірніми елементами тегів p, використовується дочірній селектор >.

p > i {
  color: red;
}

Тепер буде вибраний лише другий тег i, оскільки він є прямою дитиною елемента p. Перший тег i знаходиться всередині тега b, тому під цей селектор не підходить.

Практичне завдання

li > b {
  color: red;
}