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

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

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

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

Наприклад, нехай є два блоки з класом block:

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

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

Виберемо всі заголовки h2 та всі абзаци p, які знаходяться всередині елементів із класом block.

.block h2 {
  color: red;
}

.block p {
  color: green;
}

❗ Важливо:

Селектор .block h2 вибирає всі заголовки <h2>, які знаходяться всередині будь-якого елемента з класом block. Аналогічно працює і селектор .block p.

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

📌 Завдання:

№1
Дано HTML-код:
<p class="eee"> text <i>italic</i> </p> <p class="eee"> text <i>italic</i> </p> <div class="eee"> text <i>italic</i> </div> <div class="eee"> text <i>italic</i> </div>
Пофарбуйте в червоний колір усі теги i, що знаходяться всередині елементів із класом eee.

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

Спочатку вкажіть клас, потім через пробіл тег i.

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

.eee i {
  color: red;
}