Зауваження до конфлікту властивостей CSS

Розберемо випадок, коли CSS-селектори мають різні властивості та як браузер застосовує ці стилі.

У попередньому уроці ми розглядали конфлікт CSS-властивостей. Він виникає тоді, коли два селектори задають однакову властивість для одного елемента.

Якщо властивості різні

Якщо селектори задають різні CSS-властивості, конфлікту немає. Браузер застосує всі властивості з обох правил.

<h2>text</h2>

h2 {
  font-size: 20px;
  color: blue;
}

h2 {
  font-style: italic;
  color: red;
}

❗ Важливо:

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

📌 Завдання:

Розкажіть, які властивості застосуються до заголовка:
<h2>text</h2>
h2 {
font-size: 20px;
color: blue;
}
h2 {
font-style: italic;
color: red;
}

💡 Показати підказку

Порівняйте властивості у двох селекторах. Однакові властивості можуть бути перезаписані, а різні — додаються.

✅ Показати відповідь

Застосуються такі властивості: font-size: 20px, font-style: italic, color: red. Колір буде червоним, тому що другий селектор перезаписав попередній color.