CSS Specificity Calculator
Score competing CSS selectors, visualise their specificity and find out which rule wins, with :is, :not and :where handled correctly.
Score competing selectors and see which rule actually wins, with :is, :not and :where handled correctly.
Specificity
Wins: #app .card:hover .title
ids-classes-elements
1-3-0 #app .card:hover .title
0-2-0 .card .title
0-0-5 header nav ul li a
0-2-0 .btn.btn-primary
0-0-2 a:where(.nav) span
Winner: #app .card:hover .title
About the css specificity calculator
When a style will not apply, specificity is usually why. The rule is simple to state and hard to eyeball: count ids, then classes and attributes and pseudo classes, then elements. Compare the three numbers in order, and the first difference decides it.
The parts people get wrong are the functional pseudo classes. :is() and :not() take the specificity of their most specific argument, while :where() always contributes nothing at all. That last one is the reason :where() is so useful for defaults you want to be easy to override.
How to use it
- 1Paste the competing selectors, one per line.
- 2Read the three numbers beside each one.
- 3Look at the bars to see where the weight is coming from.
- 4Check which selector is named as the winner.
Questions
How is specificity compared?
Left to right, not as a total. One id beats any number of classes, because the first column is compared first. A score of 1-0-0 beats 0-9-9.
What does :where() do to specificity?
Nothing, deliberately. Everything inside it counts as zero, which makes it the right tool for base styles you want authors to override without a fight.
Does !important show up here?
No, because it sits outside the specificity system entirely. An !important declaration beats every normal rule regardless of score, which is exactly why it is worth avoiding.
What happens when two selectors tie?
The one that appears later in the stylesheet wins. Source order is the tiebreaker, which is why the order your CSS files load in matters.