Селектор нащадків у CSS

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

Селектор нащадків у CSS

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

Нехай у нас є невпорядкований список ul та впорядкований список ol:

<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

<ol>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ol>

Якщо написати такий CSS, то всі елементи li стануть червоними незалежно від того, у якому списку вони знаходяться.

li {
  color: red;
}

Але якщо потрібно пофарбувати елементи li списку ul у червоний колір, а елементи li списку ol — у зелений, слід використати селектор нащадків.

ul li {
  color: red;
}

ol li {
  color: green;
}

Селектор нащадків може складатися не лише з двох селекторів. Їх може бути будь-яка кількість.

ul li i {
  color: red;
}

У цьому прикладі будуть вибрані всі теги i, які знаходяться всередині тегів li, а ті, у свою чергу, знаходяться всередині списку ul.

❗ Важливо:

Селектор нащадків записується через пробіл. Кожен наступний селектор має знаходитися всередині попереднього.

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

📌 Завдання:

№1
Дано HTML-код:
<ul>
<li>text italic</li>
<li>text italic</li>
<li>text italic</li>
<li>text italic</li>
</ul>
paragraph text italic
paragraph text italic
Пофарбуйте курсив усередині тегів ul у червоний колір, а курсив усередині тегів p — у зелений.

💡 Показати підказку

Використайте два селектори нащадків: один для ul, інший для p.

✅ Показати відповідь

ul i {
  color: red;
}

p i {
  color: green;
}

📌 Завдання:

№2
Дано HTML-код:
paragraph text bold italic
paragraph text italic
Пофарбуйте у червоний колір лише курсив, який знаходиться всередині тега b, а тег b — усередині тега p.

💡 Показати підказку

Складіть селектор із трьох елементів, записавши їх через пробіл.

✅ Показати відповідь

p b i {
  color: red;
}