Skip to main content

Як !important впливає на специфічність?

CSSJunior~1 хв читання
Запропонувати правку

!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 «чит-кодом», через що його й уникають у звичайній розробці.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку