Как пользоваться
- Введите селектор в поле Селектор, записав его так, как он написан в таблице стилей.
- Введите второй селектор в поле Второй селектор (необязательно), чтобы сравнить их, или оставьте поле пустым.
- Прочитайте Специфичность (a, b, c) для первого селектора и Какое правило побеждает, если вы ввели два.
- Откройте таблицу Посчитанные части, чтобы увидеть, какая часть каждого селектора дала каждое число.
Как считаются три числа
В Рекомендации Selectors Level 3 селектор считается по трём столбцам. Инструмент сравнивает числа слева направо: сначала a, потом b, потом c. Универсальный селектор * и комбинаторы, такие как > и +, не учитываются.
- a — число ID-селекторов, например #nav.
- b — число классов, например .active, атрибутных селекторов, например [href], и псевдоклассов, например :hover.
- c — число селекторов типов, например li или a, и псевдоэлементов, например ::before.
Псевдоклассы с аргументами
:is(), :not() и :has() считаются как их самый специфичный аргумент, поэтому :is(#a, .b) даёт (1, 0, 0). :where() не даёт ничего. :nth-child() считается как один псевдокласс плюс самый специфичный селектор в его списке «of S», поэтому :nth-child(even of li, .item) даёт (0, 2, 0). Эти правила взяты из черновика Selectors Level 4, который является редакторским черновиком и может измениться.
Чего инструмент не делает
- Он считает псевдоэлемент с аргументом, например ::part(x), как один псевдоэлемент и не читает его аргумент.
- Он не читает вложенность с помощью & и принимает один селектор, а не список через запятую.
- Он не видит вашу таблицу стилей, поэтому при равной специфичности говорит, что побеждает правило, стоящее позже, а порядок оставляет вам.
Пример: ссылка в навигационной панели
У первого селектора, #nav li.active > a:hover, один ID, #nav. Два класса и псевдокласса, .active и :hover, и два типа, li и a. Его специфичность — (1, 2, 2). Второй селектор, #nav a, содержит один ID и один тип, поэтому его специфичность — (1, 0, 1). Побеждает первый селектор: столбцы a совпадают, а в b и c у него больше.
| Селектор | a | b | c |
|---|---|---|---|
| #nav li.active > a:hover | 1 | 2 | 2 |
| #nav a | 1 | 0 | 1 |
Частые вопросы
Почему ID считается в первом столбце?
Инструмент сравнивает столбцы слева направо, поэтому сначала решается столбец ID, a. Селектор с одним ID лишним получает больший a, и классы и типы в b и c в этом случае не сравниваются.
Важен ли порядок правил?
Только когда у двух селекторов одинаковая специфичность. Каскад CSS, уровень 4 говорит, что при равенстве побеждает последнее объявление в порядке документа, то есть правило, которое стоит позже.
Почему :not(#a) добавляет к специфичности?
Сам псевдокласс :not() не считается, а его аргумент считается. В примере из Selectors Level 3 #s12:not(FOO) имеет специфичность (1, 0, 1): один ID из #s12 и один тип из аргумента FOO.
Добавляют ли универсальный селектор и комбинаторы что-нибудь?
Нет. Универсальный селектор не учитывается, как и комбинаторы >, + и ~. Пример * из раздела Level 3 имеет специфичность (0, 0, 0).
Учитывает ли инструмент встроенные стили и !important?
Нет. Он считает один селектор. Каскад сначала сравнивает источник и важность, поэтому правило с !important или встроенный стиль могут победить, какими бы ни были очки селекторов. Сравнивайте только два селектора, которые задают одно свойство с одинаковой важностью.
Отправляется ли введённый селектор куда-нибудь?
Нет. Разбор выполняется в вашем браузере, и ничего из введённого не сохраняется и не отправляется на наш сервер. Проверьте результат, прежде чем менять таблицу стилей.
Источники
- W3C: Selectors Level 3, подсчёт специфичности селектора (на английском)
- W3C: Selectors Level 4, редакторский черновик, правила специфичности (на английском)
- W3C: CSS Cascade Level 4, порядок сортировки каскада (на английском)
Цифры и текст в последний раз проверены четверг, 12 ноября 2026 г..