CSS Specificity Calculator
Calculate selector specificity as ID, class and element weights.
Overview
Paste a CSS selector and read its specificity weight as a 3-part score (IDs / classes / elements). The tool ranks the parts so you can see at a glance why one rule is winning the cascade fight against another.
It's for front-end developers debugging "why won't my style apply?" issues, and anyone refactoring a stylesheet that's grown enough specificity creep to need !important flags. Reach for it when reviewing a pull request, untangling a Tailwind/utility-class collision, or training newcomers on the cascade.
How it works
Specificity is defined in CSS Selectors Level 3 as a 3-tuple (a, b, c): a counts ID selectors, b counts class selectors, attribute selectors, and pseudo-classes, and c counts type selectors and pseudo-elements. The universal selector * and combinators ( , >, +, ~) contribute nothing.
When two rules apply to the same element, the higher-specificity tuple wins, compared left-to-right. The :not() and :is() pseudo-classes don't count themselves but use the highest-specificity selector in their argument list. The :where() pseudo-class always contributes zero specificity.
Examples
- Single class:
.button -> (0, 1, 0) - Type + descendant:
article p -> (0, 0, 2) - ID + class + element:
#header .nav a -> (1, 1, 1) :is()takes the strongest argument::is(#main, .body) p -> (1, 0, 1)
FAQ
Does inline style="..." win the cascade?
Yes - inline styles have higher specificity than any selector, second only to !important declarations.
How does !important interact with specificity?
!important declarations form their own tier above normal declarations. Among !important rules, the higher specificity still wins. Author !important beats user-agent !important.
Why does :where() matter?
It's a zero-specificity wrapper - use it inside design systems to provide defaults that page-level rules can override without specificity wars.
What about Tailwind utility classes?
Each utility is a single class selector with (0, 1, 0) specificity. Order of declaration in the generated stylesheet breaks ties, which is why utility order matters.