CSS Specificity Calculator
Calculate any CSS selector's specificity — ID/class/element breakdown with per-part explanation and a compare-two-selectors mode to see which wins. Free.
0,0,0
💡 How specificity works
- Specificity is scored as three numbers: IDs, classes/attributes/pseudo-classes, elements/pseudo-elements.
- A higher group always wins — one ID beats any number of classes.
- When specificity ties, the rule that appears later in the CSS wins.
Free CSS Specificity Calculator
Calculate the specificity of any CSS selector and see the breakdown. Enter a selector to get its ID / class / element score, a per-part explanation, and an optional side-by-side comparison to find out which of two selectors wins. Free, no sign-up, runs in your browser.
What is CSS specificity?
Specificity is how the browser decides which CSS rule wins when several rules target the same element. Every selector gets a score based on what it contains, and the highest score applies. Understanding specificity is the key to fixing the classic frustration of a style that just won't apply — it is almost always because another selector is more specific.
How specificity is scored
Specificity is counted in three groups, usually written as three numbers:
- IDs — each #id selector (the most powerful group).
- Classes, attributes, and pseudo-classes — each .class, [attr], and :hover / :nth-child().
- Elements and pseudo-elements — each tag name and ::before / ::after.
- The universal selector (*) and combinators (>, +, ~) add nothing.
How to use the calculator
It is instant:
- Type a CSS selector.
- See the ID / class / element score and a breakdown of each part.
- Optionally enter a second selector to compare.
- The tool tells you which selector wins, or that it is a tie.
How the winner is decided
The three groups are compared from left to right: IDs first, then classes, then elements. A higher number in an earlier group always wins, no matter what comes after — so a single ID (1,0,0) beats a selector with ten classes (0,10,0). Only when an earlier group ties does the next group act as a tiebreaker. And when two selectors have identical specificity, the rule that appears later in the stylesheet wins.
The modern selectors :is(), :where(), and :not()
Newer pseudo-classes change the math. :where() always contributes zero specificity, which makes it perfect for low-priority base styles that are easy to override. :is() and :not() take the specificity of their most specific argument. This calculator handles all three correctly, so you can see exactly how they affect your score — a common source of confusion when refactoring selectors.
Pro tip
Keep specificity low and flat so styles stay easy to override — prefer a single class over long descendant chains, and avoid IDs for styling. When you need to override third-party CSS, this calculator shows exactly how much specificity you must match or exceed. For selecting elements by position, our :nth-child Tester pairs well with this tool.
FAQ
Is this specificity calculator free?
How is CSS specificity calculated?
Does an ID always beat classes?
What happens when two selectors have the same specificity?
How do :is(), :where(), and :not() affect specificity?
Why isn't my CSS rule applying?
Does the universal selector add specificity?
Related tools
Pro tip: pair this tool with CSS Box-Shadow Generator and CSS Flexbox Generator for a faster SEO workflow.