Создать аккаунт
Интерфейсы и CSSРаботает в браузере

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

Проверьте, почему один selector перекрывает другой, без выполнения CSS и без анализа всего stylesheet.

  • ID/class/type score
  • Selector list
  • Без CSS execution
Онлайн-инструмент

Попробуйте инструмент

Добавьте данные, выберите нужные параметры и получите готовый результат.

Исходные данные

Результат

1-2-2  #app .card:hover > h2::before
  • 1-2-2 — ID 1, class/attribute/pseudo-class 2, type/pseudo-element 2

Ваши данные остаются здесь

Текст и выбранные файлы обрабатываются в текущем браузере и не отправляются на сервер для получения результата.

Проверено: 2026-07-17
01

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

  1. 1

    Вставьте один selector или список через запятую.

  2. 2

    Проверьте итоговый score для каждого selector.

  3. 3

    Сравните ID, class/attribute/pseudo-class и type buckets.

02

Что умеет инструмент

  • Подсчёт ID selectors, classes, attributes и pseudo-classes.
  • Подсчёт type selectors и pseudo-elements.
  • Bounded обработка :where() как zero и :is/:not/:has по strongest argument.
03

Когда пригодится

  • Разбор конфликта между utility class и component selector.
  • Проверка selector перед упрощением CSS.
  • Документация правил специфичности в дизайн-системе.
04

Что происходит внутри

Score выводится как IDs-classes-types, например 1-2-0.

Функция :where() обнуляется согласно современным правилам specificity.

05

Вопросы и ответы

Почему !important не входит в score?

!important относится к cascade resolution, а не к числу specificity selector.

Можно анализировать весь CSS-файл?

Нет. Инструмент считает явно вставленные selectors, без stylesheet parsing.