CSS Specificity Calculator
Вычислите специфичность CSS-селекторов и узнайте, какой стиль победит при конфликте
Примеры
Как работает специфичность CSS
#header#nav#logo.menu[type="text"]:hover:nth-child(2)divp::before::afterВажно: специфичность не переносится между разрядами. 11 классов не перекроют один ID.
!important полностью игнорирует специфичность и имеет наивысший приоритет.
:where() всегда имеет специфичность 0-0-0, а :not() берёт специфичность своего аргумента.
About CSS Specificity Calculator
Калькулятор специфичности CSS-селекторов. Введите один или несколько селекторов — инструмент вычислит их вес по правилам каскада (a, b, c) и покажет, какой стиль применится при конфликте. Полезно для отладки и изучения приоритетов CSS.
Frequently asked questions
Три числа (a, b, c): a — количество ID-селекторов (#id), b — количество классов (.class), атрибутов ([attr]) и псевдоклассов (:hover), c — количество элементов (div, p) и псевдоэлементов (::before). Сравнение идёт слева направо: (1,0,0) побеждает (0,10,0).
Специфичность — это тройка (a,b,c), а не одно число. Один #id (1,0,0) всегда побеждает любое количество .class (0,n,0), потому что сравнение начинается с категории a.
:not() принимает специфичность самого специфичного аргумента. :where() всегда имеет специфичность 0 — удобно для сброса стилей без повышения веса.
Специфичность приоритетнее порядка. При равной специфичности побеждает правило, идущее позже в каскаде. Порядок учитывается только при одинаковом «весе» селекторов.
Useful articles
Guides and tips for this topic
Related tools
Other useful reChecker tools