CSS Specificity Calculator

Paste a CSS selector to see its specificity broken down by IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements.

1

IDs

3

Classes / attrs / pseudo-classes

4

Elements / pseudo-elements

(1, 3, 4)

Relative weight for comparison: 1,003,004

Specificity is compared category by category, left to right (IDs first, then classes, then elements), a single ID always outweighs any number of classes, regardless of the numeric "weight" shown above, which is just a convenient way to sort/compare selectors on this page.

Example input

#nav ul li.active > a:hover

Example output

(1, 2, 2)

What is a CSS Specificity Calculator?

CSS specificity is the set of rules the browser uses to decide which style wins when two or more CSS rules target the same element with conflicting properties. It's calculated as three separate counts, not a single number: how many ID selectors are in the rule, how many classes, attributes, and pseudo-classes, and how many plain element and pseudo-element selectors. Whichever rule has the higher count in the first category wins outright, and ties only get broken by moving down to the next category. This is why a single ID selector always beats any number of classes, no matter how many classes you stack on.

When to use it

This comes up constantly when debugging why a style you wrote isn't applying, even though it looks like it should. Two rules are competing for the same element, and one of them has higher specificity, so the browser is quietly ignoring the one you expected to win. It's also useful when writing CSS in a large codebase where you want to keep specificity low and predictable on purpose, since overly specific selectors are one of the most common reasons CSS becomes hard to override and maintain over time.

How it works

The calculator parses your selector and counts each type of component separately. ID selectors (like #nav) go in the first bucket. Classes, attribute selectors, and pseudo-classes like :hover or :nth-child go in the second. Plain element selectors like div or ul, plus pseudo-elements like ::before, go in the third. The three counts are shown together as a tuple, and comparing two selectors means comparing these tuples left to right, not adding them into one combined score.

Frequently asked questions

Does a higher specificity number always win?

Specificity isn't really one number, it's three separate counts compared in order: IDs first, then classes and pseudo-classes, then elements. A selector with one ID beats a selector with fifty classes, because the comparison stops at the first category where they differ. Treating it as a single combined score is a common misunderstanding.

Why does !important override specificity entirely?

The !important flag sits outside the normal specificity system altogether. A declaration marked !important overrides any competing declaration regardless of specificity, which is exactly why it's generally discouraged for routine styling. It makes future overrides much harder, since the only way to beat an !important rule is with another !important rule that comes later, or an inline style with !important.

Does the order of CSS rules matter if specificity is equal?

Yes. When two rules have identical specificity, the one that appears later in the stylesheet (or is loaded later) wins. This is the actual tie-breaker, and it's a common source of confusing bugs when two equally specific rules are defined in different files and the load order isn't obvious.