Урок 51 із 239
21%
← Назад

Групування селекторів у CSS

Вивчаємо, як об’єднувати CSS-селектори для скорочення коду.

Групування селекторів у CSS

Іноді виникає ситуація, коли потрібно зробити однакові стилі для декількох HTML-елементів. Наприклад, змінити колір одразу для заголовків h2, h3 та абзаців.

Без групування селекторів довелося б писати окремий CSS-код для кожного елемента:

h2 {
  color: red;
}

h3 {
  color: red;
}

p {
  color: red;
}

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

h2, h3, p {
  color: red;
}
❗ Важливо:

Групування селекторів допомагає уникати повторення коду та робить CSS-файл більш зрозумілим.

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

📌 Завдання:
  1. №1
  3. Спростіть код, використовуючи групування селекторів:
  5. h1 {
  6. text-align: center;
  7. }
  9. h2 {
  10. text-align: center;
  11. }
  13. h3 {
  14. text-align: center;
  15. }
💡 Показати підказку

Якщо декілька селекторів мають однакові CSS-властивості, їх можна записати через кому в одному правилі.

✅ Показати відповідь
h1, h2, h3 {
  text-align: center;
}