Stuck because a CSS rule will not apply? Paste the competing selectors to see their specificity as (IDs, classes, elements) and which one wins. Modern selectors like :is(), :not(), :has() and :where() are scored correctly.
loading toolHow to use the css specificity calculator
- Paste your code or text.
- The result and any errors appear as you type.
- Copy or download the result.
Good to know
- Inline style="" attributes and !important beat normal selectors; use them sparingly.
Questions
How is specificity compared?
From left to right: any ID beats any number of classes, and any class, attribute or pseudo-class beats any number of elements. If they are equal, the rule written later wins.
Why does :where() count as zero?
:where() is designed to add no specificity, so it is easy to override. :is(), :not() and :has() take the strongest selector inside them.
Is my data private?
Yes. Everything happens inside your own browser: nothing you type or choose is uploaded to us or anyone else.
Is it free?
Completely free, with no sign-up, no watermark and no limit on how many times you use it. Light ads keep the site running.
