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

Как пользоваться

1. Введите по одному селектору в строке (до 10 строк) или выберите готовый пример.
2. Посмотрите цветной разбор: красным выделен a (ID), синим b (классы, атрибуты, псевдоклассы), зелёным c (теги, псевдоэлементы).
3. Сравните значки (a,b,c): сначала сравнивается a, при равенстве b, затем c. Селектор на первом месте рейтинга побеждает.
4. При полном равенстве побеждает правило, написанное в CSS позже. !important, inline-стили и @layer учитываются отдельно.

Как это работает

Три числа (a,b,c)

Специфичность состоит из трёх столбцов. a — количество ID-селекторов (#id), b — классов (.class), атрибутов ([type]) и псевдоклассов (:hover), c — тегов (div) и псевдоэлементов (::before). Сравнение идёт слева направо: один ID сильнее любого числа классов, а одиннадцать тегов никогда не перебьют один класс — столбцы не переносятся друг в друга.

#nav .item a        →  (1,1,1)
.nav .item a:hover  →  (0,3,1)
nav ul li a         →  (0,0,4)

Что считается, а что нет

Универсальный селектор *, комбинаторы (пробел, >, +, ~) и :where() дают 0. Атрибутный селектор [id="x"] — это атрибут, а не ID, поэтому он идёт в столбец b. Старые псевдоэлементы с одним двоеточием — :before, :after, :first-line, :first-letter — считаются псевдоэлементами и попадают в c.

:is(), :not(), :has() и :where()

:is(), :not() и :has() сами ничего не добавляют, но берут специфичность самого сильного аргумента из списка: :is(#a, .b) равно (1,0,0). :where() всегда равен нулю, поэтому он удобен для сбросов и базовых стилей, которые должны легко переопределяться. :nth-child(2n+1 of .x) — это псевдокласс (b) плюс специфичность селектора .x.

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

Каскад сначала смотрит на происхождение стиля и !important, затем на стили, привязанные к элементу (inline), потом на слои @layer и только после этого сравнивает специфичность; последним решает порядок записи. Поэтому style="..." и !important перебивают обычное правило независимо от веса селектора, а правило из более позднего слоя побеждает более сильный селектор из раннего. У !important порядок слоёв переворачивается.

@layer base, components;
@layer base { #page p { color: red; } }
@layer components { p { color: blue; } }
/* побеждает components: слой объявлен позже */

Частые вопросы