CSS Specificity Calculator
Enter one or two CSS selectors to see their specificity, shown as ids-classes-types, and which one would win a conflict.
Inputs
Results
- Selector A
- 1-1-1
- Selector B (optional, to compare)
- 0-1-4
A wins
How CSS specificity is calculated
Enter one or two CSS selectors to see their specificity, shown as ids-classes-types, and which one would win a conflict.
How it's calculated
IDs count the most, then classes, attribute selectors, and pseudo-classes, then element type selectors and pseudo-elements. Combinators like space, >, and ~ don't affect specificity.
Limitations
- `:not()`, `:is()`, and `:has()` are each counted as one pseudo-class rather than looking inside their argument.
- `:where()` always counts as zero, matching the CSS specification.
Worked example
`#main .container p` scores 1 id, 1 class, 1 type (1-1-1), while `nav ul li.active a` scores 0 ids, 1 class, 4 types (0-1-4) — the first selector wins despite matching fewer elements by name.
Calculation notes
All calculation runs in your browser; the selectors you enter are never sent anywhere.
FAQ
Why does a later rule sometimes win even with equal specificity?
When specificity ties, the rule that appears later in the stylesheet (or has higher CSS layer priority) wins.
Does inline style show up here?
No — inline `style` attributes always outrank any selector-based specificity, regardless of what this calculator shows.
Does specificity depend on the order of parts in a selector?
No — only which kinds of selectors appear and how many of each, not the order they're written in.