Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як !important впливає на специфічність?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`!important`** не збільшує специфічність селектора, але перебиває результат каскаду, стаючи на найвищий рівень пріоритету, вищий за будь-яку специфічність. **Ключове:** якщо конфліктують два правила з `!important`, порівняння знову йде за специфічністю селектора, наприклад `id` переможе `p`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`!important` **не збільшує специфічність селектора**, але **перебиває результат каскаду**, стаючи на самий верх пріоритетів. Тобто це не про «вагу» селектора, а про «силу» правила. --- ### **Як працює пріоритет із** `!important` Фактично `!important` створює окремий, найвищий рівень, вищий за специфічність. Порядок застосування правил стає таким: 1. `!important` 2. inline-стилі 3. селектор за `id` 4. селектор за класом, атрибутом, псевдокласом 5. селектор за тегом 6. стилі браузера --- ### **Приклад** ```css p { color: blue !important; } #text { color: red; } ``` Хоча `#text` має вищу специфічність, підсумковий колір буде **blue**, тому що в першого правила стоїть `!important`. --- ### **Коли** `!important` **все ж програє** Тільки в одному випадку, якщо є **інше** `!important` **з вищою вагою селектора**: ```css p { color: blue !important; } #text { color: red !important; } ``` Тут переможе **червоний**, тому що за рівних `!important` далі знову вступає в силу специфічність, `id` сильніший за `p`. --- ### **Підсумок** - `!important` **не змінює специфічність** - але **впливає на підсумковий пріоритет**, обходячи каскад і «вагу» селектора - при конфлікті двох `!important` порівняння знову йде за специфічністю селектора Цей механізм робить `!important` «чит-кодом», через що його й уникають у звичайній розробці.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.