Урок 69 із 239
29%
← Назад

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

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

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

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

.block h2 {
  color: red;
}

.block h3 {
  color: red;
}

Цей код можна скоротити за допомогою групування селекторів:

.block h2,
.block h3 {
  color: red;
}

Кома означає: застосувати ці самі стилі до всіх перелічених селекторів.

📌 Завдання:
  1. №1 ⊗mkPmSlCSG
  2. Спростіть код, використовуючи групування селекторів:
  4. #block h1 {
  5. text-align: center;
  6. }
  8. #block h2 {
  9. text-align: center;
  10. }
  12. №2 ⊗mkPmSlCSG
  13. Спростіть код, використовуючи групування селекторів:
  15. #block h1 {
  16. text-align: center;
  17. font-size: 30px;
  18. }
  20. #block h2 {
  21. text-align: center;
  22. font-size: 20px;
  23. }
💡 Показати підказку

💡 Підказка: знайдіть однакові CSS-властивості. Їх можна винести в один спільний селектор через кому.

✅ Показати відповідь
✅ Відповідь №1:

Було:

#block h1 {
  text-align: center;
}

#block h2 {
  text-align: center;
}


Стало:

#block h1,
#block h2 {
  text-align: center;
}



✅ Відповідь №2:

Спочатку об'єднуємо спільну властивість text-align:

#block h1,
#block h2 {
  text-align: center;
}

#block h1 {
  font-size: 30px;
}

#block h2 {
  font-size: 20px;
}