Вибір елемента за унікальним id у CSS

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

Вибір елемента за унікальним id у CSS

Окрім класів, елементи можна вибирати за допомогою атрибута id. На відміну від class, значення id має бути унікальним на всій HTML-сторінці.

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

Унікальний ідентифікатор задається за допомогою атрибута id:

<div id="block1">
  <p>text</p>
  <p>text</p>
</div>

<div id="block2">
  <p>text</p>
  <p>text</p>
</div>

Щоб звернутися до елемента за його id у CSS, використовується символ # перед назвою ідентифікатора:

#block1 {
  color: red;
}

#block2 {
  color: green;
}

❗ Важливо:

Використовуйте id для унікальних елементів сторінки (наприклад, header, footer або main). Якщо однаковий стиль потрібно застосувати до кількох елементів — використовуйте class.

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

📌 Завдання:

№1
Дано наступний HTML-код:
<div id="elem1"> <h2>Title</h2> <p> text </p> <p> text </p> </div> <div id="elem2"> <h2>Title</h2> <p> text </p> <p> text </p> </div> <div id="elem3"> <h2>Title</h2> <p> text </p> <p> text </p> </div>
Зафарбуйте:
• вміст блоку elem1 — у червоний колір;
• вміст блоку elem2 — у зелений колір;
• вміст блоку elem3 — у блакитний колір.

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

Для вибору елемента за id використовуйте символ #. Наприклад: #elem1.

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

#elem1 {
  color: red;
}

#elem2 {
  color: green;
}

#elem3 {
  color: deepskyblue;
}