Урок 64 із 239
27%
← Назад

Селектор за id і CSS-класи

Дізнаємося, як одночасно використовувати id і class для одного HTML-елемента та поєднувати їхні стилі.

Селектор за id і CSS-класи

Одному HTML-елементу можна одночасно задати і атрибут id, і атрибут class. Це дозволяє комбінувати стилі: частину оформлення задавати через id, а частину — через клас.

Наприклад, елемент може мати унікальний id і водночас належати до певного класу:

<div id="block" class="large">
  <p>text</p>
  <p>text</p>
</div>

Тепер можна окремо описати стилі для id і для класу:

#block {
  color: red;
  font-family: Arial;
}

.large {
  font-size: 30px;
}
❗ Важливо:

Стилі з id і class застосовуються одночасно. Це дозволяє зробити оформлення більш гнучким.

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

📌 Завдання:
  1. №1
  3. Стилизуйте блоки за допомогою id і класу.
  5. HTML:
  7. <div id="block" class="text"> <p>text</p> <p>text</p> <p>text</p> </div> <div class="text"> <p>text</p> <p>text</p> <p>text</p> </div>
  9. Зробіть так, щоб:
  10. • обидва блоки з класом text мали розмір шрифту 20px;
  11. • лише блок з id block мав червоний колір тексту.
💡 Показати підказку

Створіть окремий селектор для класу .text і окремий селектор для #block.

✅ Показати відповідь
.text {
  font-size: 20px;
}

#block {
  color: red;
}