CSS specificity calculator
Enter one or more selectors, separated by commas or on separate lines, to see which one wins when rules conflict.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter selectors.
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
A = ID selectors #id. B = classes .class, attributes [attr] and pseudo-classes :hover. C = types such as div and pseudo-elements ::before. :is, :not and :has take their most specific argument, :where counts zero, and :nth-child(An+B of S) adds S. Compare A first, then B, then C.
Example
Result: Specificity of the first selector: (1, 2, 1).
#nav .item a:hover ul li::before :where(#main) p
#nav .item a:hover (1, 2, 1)
Limits and caveats
- It does not score the & nesting selector, which depends on the parent rule.
- Inline style attributes and !important beat any specificity and are not shown here.
- It does not check that pseudo-class names are known to browsers.
Questions about this tool
Does a selector with 11 classes beat one ID?
No. (0, 11, 0) loses to (1, 0, 0) because comparison starts with the ID column, and columns never carry over.
Why does :where count as zero?
It was designed for easy-to-override styles, so it adds no specificity whatever is inside it.
What if two selectors tie?
The rule that comes later in the stylesheet, or in load order, wins.