Складні комбінації селектора нащадків і класів у CSS

Навчимося поєднувати селектори класів, тегів і селектор нащадків для точного вибору елементів.

Складні комбінації селектора нащадків і класів у CSS

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

Нехай маємо такий HTML-код:

<div class="block">
  <h2 class="header">Title h2</h2>
  <p>text</p>

  <h3 class="header">Title h3</h3>
  <p>text</p>
  <p>text</p>
</div>

<div class="block">
  <h2 class="header">Title h2</h2>
  <p>text</p>

  <h3 class="header">Title h3</h3>
  <p>text</p>
  <p>text</p>
</div>

Виберемо всі елементи з класом header, які знаходяться всередині елементів із класом block, і змінимо для них шрифт.

.block .header {
  font-family: Arial;
}

Усередині елемента з класом block клас header можуть мати різні теги. Наприклад, окремо можна вибрати заголовки h2 та h3.

.block h2.header {
  font-size: 30px;
  color: red;
}

.block h3.header {
  font-size: 20px;
  color: green;
}

Повний CSS-код буде виглядати так:

.block .header {
  font-family: Arial;
}

.block h2.header {
  font-size: 30px;
  color: red;
}

.block h3.header {
  font-size: 20px;
  color: green;
}

❗ Важливо:

Чим більше селекторів поєднано разом, тим точніше CSS визначає, до яких елементів застосовувати стилі.

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

📌 Завдання:

№1
Поясніть, що вибирає селектор:
.eee .bbb { color: red; }
Потім напишіть HTML-код, який підходить під цей селектор.
№2
Поясніть, що вибирає селектор:
.eee h2 { color: red; }
Потім напишіть HTML-код, який підходить під цей селектор.
№3
Поясніть, що вибирає селектор:
.eee h2.bbb { color: red; }
Потім напишіть HTML-код, який підходить під цей селектор.
№4
Поясніть, що вибирає селектор:
.eee h3.bbb { color: red; }
Потім напишіть HTML-код, який підходить під цей селектор.
№5
Поясніть, що вибирає селектор:
.eee p.bbb { color: red; }
Потім напишіть HTML-код, який підходить під цей селектор.
№6
Поясніть, що вибирає селектор:
.eee .bbb .kkk { color: red; }
Потім напишіть HTML-код, який підходить під цей селектор.

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

Читайте селектор зліва направо. Спочатку знайдіть батьківський елемент, а потім визначте, який саме елемент усередині нього потрібно вибрати.

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

№1
Селектор вибирає всі елементи з класом .bbb, які знаходяться всередині елемента з класом .eee.

<div class="eee">
  <p class="bbb">Text</p>
</div>

№2
Вибирає всі теги <h2>, що знаходяться всередині елемента з класом .eee.

<div class="eee">
  <h2>Title</h2>
</div>

№3
Вибирає всі теги <h2> з класом .bbb, що знаходяться всередині елемента з класом .eee.

<div class="eee">
  <h2 class="bbb">Title</h2>
</div>

№4
Вибирає всі теги <h3> з класом .bbb, що знаходяться всередині елемента з класом .eee.

<div class="eee">
  <h3 class="bbb">Title</h3>
</div>

№5
Вибирає всі теги <p> з класом .bbb, що знаходяться всередині елемента з класом .eee.

<div class="eee">
  <p class="bbb">Text</p>
</div>

№6
Вибирає всі елементи з класом .kkk, які знаходяться всередині елемента з класом .bbb, що, у свою чергу, знаходиться всередині елемента з класом .eee.

<div class="eee">
  <div class="bbb">
    <span class="kkk">Text</span>
  </div>
</div>