What is it?
The CSS Specificity Calculator shows the specificity of each selector as (IDs, classes, elements), lists them Strongest first, and tells you which rule wins. Modern selectors like :is(), :not(), :has() and :where() are counted correctly.
Who is it for?
Web developers and Blogger theme editors whose style “won’t apply”, students learning the cascade, and anyone overriding a theme’s CSS.
How to use it
- Paste CSS selectors (one per line).
- Read the Specificity of each and the order.
- Raise your selector’s specificity or reorder your CSS so the one you want wins.
Worked example
#menu a is (1,0,1); .nav .item a is (0,2,1). The ID wins, even though the second has more parts. :where(.nav) a is only (0,0,1), because :where counts as zero, handy for easy-to-override defaults.
Good practice
Prefer classes over IDs for styling, avoid !important, and keep selectors short.
Errors and how to fix them
- “The top two are equal: the one written LATER in the CSS wins”: move your rule after the other one, or make it a little more specific.
- Still overridden: the other rule may use
!importantor an inlinestyle="", which beat any selector. - Invalid selector: check brackets in pseudo-classes like
:not(.a).
Questions people ask
- Does !important count? It overrides normal specificity; avoid it where you can.
Practical tip
Paste the competing selectors from DevTools exactly as written, including pseudo-classes.
Open the tool: CSS Specificity Calculator
Still stuck?
Contact support. Tell us which tool or page you were using, what you tapped, what you saw, and your phone or computer and browser (for example: Android phone, Chrome). We reply by email.
Questions, or an error not listed here?
Tell us in the comments: what you were doing, the exact message you saw, and your device and browser. We read every comment and add new fixes to this article.