Как браузер решает, чей стиль победит — Егор Старобинский-Ковешников

Порядок каскада

Как это устроено

Когда два правила указывают разное значение для одного и того же свойства одного и того же элемента, браузер проверяет их по очереди — и специфичность стоит только на третьем месте:

1 · Происхождение → 2 · Важность (!important) → 3 · Специфичность → 4 · Порядок объявления

Происхождение — стили браузера по умолчанию проигрывают стилям автора страницы почти всегда; это происходит ещё до всего остального.

Важность — правило с !important побеждает любое правило без него, независимо от специфичности и порядка. Дальше специфичность и порядок сравниваются отдельно — только между правилами одинаковой важности.

Специфичность — то, чему обычно учат первым и единственным. Шаги 2 и 4 ниже показывают её вживую.

Порядок объявления — последний тай-брейк: при полностью равной специфичности побеждает то правило, что объявлено позже.

Калькулятор специфичности

Настоящий

Специфичность — тройка (A, B, C): A — ID-селекторы, B — классы, атрибуты и псевдоклассы, C — теги и псевдоэлементы. Введите два селектора — ниже реальный расчёт и реальная проверка, какой из них совпадает с демо-блоком и какой в итоге побеждает.

Селектор A

Специфичность: —

Селектор B

Специфичность: —

Демо-блок (реальный DOM)

Пример заголовка

!important и порядок объявления

Настоящий

Оба правила ниже используют один и тот же селектор — специфичность одинаковая по определению, так что результат целиком зависит от порядка объявления и от !important.

Демо-блок (реальный DOM)

Пример заголовка

:is() против :where()

Настоящий

Острый и современный подвох: :where() всегда добавляет 0 к специфичности, а :is() берёт специфичность своего самого специфичного аргумента. Из-за этого :where(.widget) .btn может проиграть простому button.btn, хотя «выглядит» так, будто должен победить.

Правило A

Специфичность: —

Правило B: button.btn

Специфичность: —

Демо-блок (реальный DOM)

@layer

Настоящий

@layer — механизм, специально созданный, чтобы управлять приоритетом независимо от специфичности: слой, объявленный позже, побеждает целиком, даже если его правило внутри имеет заметно более низкую специфичность.

Демо-блок (реальный DOM) · A: #id.class (1,1,0) · B: .class (0,1,0)

Специфичность —
не единственное правило

Порядок каскада

Калькулятор специфичности

Пример заголовка

!important и порядок объявления

Пример заголовка

:is() против :where()

@layer

Пример заголовка

Если это помогло — можем поговорить про остальное

Специфичность — не единственное правило

Порядок каскада

Калькулятор специфичности

Пример заголовка

!important и порядок объявления

Пример заголовка

:is() против :where()

@layer

Пример заголовка

Если это помогло — можем поговорить про остальное

Специфичность —
не единственное правило