Tools
Specificity Calculator
Paste selectors, one per line. They are scored as three numbers (ids, classes, elements), ranked, and the winner is named. The modern functions are scored the way the spec says, which is not the way most people guess.
Widely availablesince Jul 2023Widely availablesince Jul 2023Widely availablesince Jun 2026
Reading the score: the first number is ids, the second is classes, attributes and pseudo-classes, the third is elements and pseudo-elements. Compare left to right. One id beats any number of classes.
The rules that surprise people
:is(), :not() and :has() are not counted themselves. They take the
specificity of their most specific argument, even when that argument is not the one that matched. So
:is(#hero, .card) h2 carries an id’s weight on every card. :where() is the same
function with a specificity of zero, which is what makes it the right tool for defaults and resets: anything
can override it.
What is decided before specificity
Specificity is the third tiebreak, not the first. Origin and !important come first, then
cascade layers: a rule in a later layer beats a rule in an earlier one no
matter how specific the earlier selector is. Unlayered styles beat all layered ones. Only when two declarations
are level on all of that does the score above matter, and if the score ties too, the one written later wins.
The practical lesson
Keep scores low and flat. A stylesheet where everything is a single class is one where order and layers do the
deciding, which you can read. One where ids and long chains do it is one where you reach for
!important. The full story is in the cascade lesson.