Використання id у CSS

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

До селектора id можна застосовувати всі комбінації селекторів, які ви вже вивчили: селектори тегів, класів, нащадків та їх поєднання.

Приклад 1

Нехай маємо наступний HTML-код:

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

Виберемо всі заголовки h2, які знаходяться всередині елемента з id="block":

#block h2 {
  color: red;
}

Тепер виберемо всі абзаци p усередині цього ж елемента:

#block p {
  color: green;
}

Тепер нехай HTML виглядає так:

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

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

Виберемо всі елементи з класом header, що знаходяться всередині елемента з id="block":

#block .header {
  color: red;
}

А тепер виберемо тільки заголовки h2 з класом header усередині цього елемента:

#block h2.header {
  color: red;
}

❗ Важливо:

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

📌 Завдання:

№1
Напишіть селектор, який вибере всі h2, що знаходяться всередині елемента з id="elem".
<div id="elem"> <h2>Choose</h2> <p>---</p> <h2>Choose</h2> <p>---</p> </div> <h2>Do not +++</h2> <p>---</p>
№2
Напишіть селектор, який вибере всі елементи з класом text, що знаходяться всередині елемента з id="elem".
<div id="elem"> <p class="text">+++</p> <p class="text">+++</p> <ul> <li class="text">+++</li> <li class="text">+++</li> <li class="text">+++</li> <li>---</li> <li>---</li> </ul> </div> <p class="text">---</p>
№3
Напишіть селектор, який вибере всі абзаци p з класом text, що знаходяться всередині елемента з id="elem".
<div id="elem"> <p class="text">+++</p> <p class="text">+++</p> <ul> <li class="text">---</li> <li class="text">---</li> <li class="text">---</li> <li>---</li> <li>---</li> </ul> </div> <p class="text">---</p>
№4
Напишіть селектор, який вибере всі li з класом text, що знаходяться всередині елемента з id="elem".
<div id="elem"> <p class="text">---</p> <p class="text">---</p> <ul> <li class="text">+++</li> <li class="text">+++</li> <li class="text">+++</li> <li>---</li> <li>---</li> </ul> </div> <p class="text">---</p>

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

Спочатку вкажіть селектор id (#elem), а після нього через пробіл — тег або клас, який потрібно знайти всередині цього елемента.

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

№1

#elem h2

№2

#elem .text

№3

#elem p.text

№4

#elem li.text