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

Помилка при групуванні складних CSS селекторів

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

Помилка при групуванні складних CSS селекторів

Під час групування селекторів через кому кожна частина повинна бути повноцінним селектором.

Часто новачки помилково думають, що селектор перед комою продовжується після неї. Але кожен селектор після коми починається окремо.

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

Такий код фактично означає:

#block h2 {
  color: red;
}

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

💡 Після коми CSS починає читати новий незалежний селектор.

📌 Завдання:
  1. №1 ⊗mkPmSlCSGM
  2. Спростіть код, використовуючи групування селекторів:
  4. #block h1 {
  5. text-align: center;
  6. }
  7. #block h2 {
  8. text-align: center;
  9. color: blue;
  10. }
  11. #block h3 {
  12. text-align: center;
  13. font-size: 16px;
  14. color: red;
  15. }
  17. №2 ⊗mkPmSlCSGM
  18. Спростіть код:
  20. #block h1.eee {
  21. text-align: center;
  22. font-size: 30px;
  23. }
  24. #block h2.zzz {
  25. text-align: center;
  26. font-size: 20px;
  27. }
  29. №3 ⊗mkPmSlCSGM
  30. Спростіть код:
  32. .xxx .kkk {
  33. text-align: center;
  34. }
  35. .eee h2.zzz {
  36. text-align: center;
  37. }
  38. #eee h2 {
  39. text-align: center;
  40. }
  42. №4 ⊗mkPmSlCSGM
  43. Спростіть код:
  45. .eee h2.zzz {
  46. text-align: center;
  47. }
  48. .xxx {
  49. text-align: center;
  50. }
💡 Показати підказку

💡 Підказка: шукайте однакові властивості. Селектори можна об'єднати через кому тільки повністю.

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

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

#block h2 {
  color: blue;
}

#block h3 {
  font-size: 16px;
  color: red;
}



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

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

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

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



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

.xxx .kkk,
.eee h2.zzz,
#eee h2 {
  text-align: center;
}



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

.eee h2.zzz,
.xxx {
  text-align: center;
}