When two CSS rules target the same element, the one with the higher specificity wins, and guessing at that ordering is how stylesheets turn into a tangle of !important declarations. This calculator takes any selector and returns its specificity as the standard three-part score: ID selectors, then class-like selectors, then element selectors, together with the single-number weight that follows from them. It explains the count for each part, so you can see exactly why #nav .item beats .item a, and why adding one more class tips a close contest. Understanding specificity directly, rather than fighting it with ever-stronger selectors, is the difference between a stylesheet you control and one that controls you, and this tool makes the arithmetic visible in seconds.
Quick Answer: Paste a CSS selector and instantly see its specificity score and breakdown.
Free Online Tool
CSS Specificity Calculator
See exactly why one rule beats another.
How to Use the CSS Specificity Calculator
- Type or paste a CSS selector, for example #nav .item a:hover.
- Press Calculate to see the (a, b, c) score.
- Read the breakdown to see where each point came from.
- Compare two selectors by running them one after the other.
- Adjust the weaker selector with the right kind of addition, not just more of everything.
Key Features
- Standard (a, b, c) specificity scoring for any selector.
- Breakdown showing ID, class-like, and element counts separately.
- Single-number weight for quick comparisons.
- Handles IDs, classes, attributes, pseudo-classes, and pseudo-elements.
- Instant feedback with no sign-up or uploads.
Best Practices and Tips
- An ID is worth more than any number of classes, so a single #id beats a selector with ten classes.
- Attribute selectors and pseudo-classes count in the same column as classes, which is why input[type=text] outranks plain input.
- Pseudo-elements such as ::before count as elements, while pseudo-classes such as :hover count as classes; the double colon is the tell.
- When two selectors tie, the one that appears later in the stylesheet wins, so order still matters after specificity.
- Keep specificity low on purpose: reusable classes are easier to override than ID-heavy selectors.
Common Mistakes to Avoid
- Adding !important to win a fight instead of understanding why the other rule won.
- Assuming more selectors always means higher specificity; only the kinds of selectors matter, not their raw count.
- Counting the universal selector *, which contributes nothing to specificity.
- Treating inline styles as just another selector; they outrank all stylesheet selectors except !important rules.
Frequently Asked Questions
What does (a, b, c) mean?
It is the specificity triple: a counts ID selectors, b counts class selectors, attribute selectors, and pseudo-classes, and c counts element selectors and pseudo-elements. Comparison goes left to right, so any selector with a higher a wins regardless of b and c, just as a higher b wins regardless of c.
Why is the score not just a single number?
Because specificity is not base ten: eleven classes do not beat one ID, even though a naive weight of 110 would suggest otherwise. The triple is the correct comparison, and the single-number weight shown here is only a rough guide for quick sorting, not a substitute for the triple.
Do combinators like > and + affect specificity?
No. Combinators describe relationships between elements but add nothing to the score themselves. Only the simple selectors on each side of a combinator contribute, so div > p has the same specificity as div p.
What about :not() and :is()?
The :not() pseudo-class itself adds nothing, but the selectors inside it do count normally. The :is() and :has() pseudo-classes take the specificity of their most specific argument, which can surprise people who expect them to be free.
How do I lower specificity that is too high?
Replace IDs with classes where possible, drop unnecessary ancestor selectors, and let the cascade and source order do more work. Low-specificity selectors are easier to override later, which keeps a growing stylesheet maintainable instead of brittle.