Урок 52 із 239
22%
← Назад

Спільні властивості при групуванні селекторів у CSS

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

Спільні властивості при групуванні селекторів у CSS

Часто декілька селекторів мають однакові CSS-властивості, але деякі з них також містять власні унікальні стилі. У такому випадку повторювані властивості можна винести в одну групу, а специфічні залишити окремо.

Наприклад, усі елементи мають однаковий колір тексту, але абзац додатково має вирівнювання та розмір шрифту.

h2 {
  color: red;
}

h3 {
  color: red;
}

p {
  color: red;
  text-align: justify;
  font-size: 16px;
}

Повторювану властивість color можна винести в окреме правило, а специфічні стилі залишити лише для абзацу.

h2, h3, p {
  color: red;
}

p {
  text-align: justify;
  font-size: 16px;
}
❗ Важливо:

Такий підхід робить CSS-код коротшим, читабельнішим і простішим у підтримці.

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

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

Знайдіть властивість, яка повторюється у всіх трьох селекторах. Винесіть її в одну групу, а унікальні властивості залиште окремо.

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

h2 {
  color: blue;
}

h3 {
  font-size: 16px;
  color: red;
}
📌 Завдання:
  1. №2
  3. Спростіть код, використовуючи групування селекторів:
  5. h1 {
  6. text-align: center;
  7. color: red;
  8. }
  10. h2 {
  11. text-align: center;
  12. color: red;
  13. }
  15. h3 {
  16. text-align: center;
  17. font-size: 16px;
  18. color: red;
  19. }
💡 Показати підказку

Властивості text-align і color повторюються у всіх селекторах. Їх можна об'єднати, а font-size залишити тільки для h3.

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

h3 {
  font-size: 16px;
}