CSS specificity calculator

When two CSS rules target the same element, the browser uses specificity to decide which one wins. Specificity explains why your new style is ignored, or why you suddenly need !important. This calculator scores any selector so you can compare rules and fix conflicts properly.

How to use it

1. Enter a selector, for example #nav .menu li a:hover.
2. Read its specificity as three numbers (a, b, c).
3. Compare it with the selector of the rule that is overriding yours.

How specificity is counted

• a: ID selectors, like #header.
• b: classes, attribute selectors and pseudo-classes, like .btn, [type='text'], :hover.
• c: element selectors and pseudo-elements, like div, ::before.

The universal selector * and combinators add nothing. Inline styles beat all selectors, and !important beats normal declarations.

Examples

• a: (0, 0, 1)
• .nav a: (0, 1, 1)
• #nav .menu li a:hover: (1, 2, 2)
• :is(#a, .b) p: (1, 0, 1), because :is() takes its most specific argument.
• :where(#a, .b) p: (0, 0, 1), because :where() always adds zero.

Comparison works column by column: (1, 0, 0) beats (0, 15, 0), because one ID outranks any number of classes. If specificity is equal, the rule that appears later wins.

Tips

• Prefer classes over IDs for styling to keep specificity low and predictable.
• Use :where() in reset and library styles so they are easy to override.
• Cascade layers (@layer) let you control priority without escalating specificity.