Micro Tools
Advertisement

CSS Specificity Calc

Enter any CSS selector and get its specificity score (a,b,c) with a full breakdown. Debug style conflicts fast.

Selector input

Type a CSS selector. Specificity computes live.

Comma-separated lists show the highest-specificity part.

Specificity

-

Enter a selector.

Advertisement

How specificity is counted

Every selector is scored as (a, b, c): IDs count toward a, classes, attribute selectors and pseudo-classes toward b, element names and pseudo-elements toward c. :not() contributes the specificity of its argument, and the universal selector * adds nothing. The numeric score is 100a + 10b + c for quick comparison.

Why specificity matters

When two rules target the same element, the higher specificity wins regardless of order. Knowing the score explains why a style refuses to apply and tells you exactly how strong your override needs to be, so you stop reaching for !important.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

CSS Specificity Calc FAQs

Does the universal selector add specificity?
No. * contributes (0,0,0). It matches everything but loses to any real selector, which is why resets are so easy to override.
How does :not() affect specificity?
:not() itself adds nothing, but its argument does. :not(.active) counts as one class (0,1,0), while :not(#main) counts as one ID (1,0,0).
Why did my class lose to an element selector list?
Eleven element selectors (0,0,11) beat one class (0,1,0) because comparison goes column by column: b is compared before c ever matters. Count the columns, not the total.
Is !important part of specificity?
No, it is a separate layer that beats all normal specificity. Treat it as a last resort; this tool helps you win conflicts without it.
What about inline styles?
Inline style attributes outrank any selector from a stylesheet. Think of them as an extra column (1,0,0,0) that always wins over stylesheet rules.
Advertisement