CSS Specificity Calculator

Understand the cascade faster by seeing the exact inline, ID, class, and element contribution of every selector fragment.

Selector

Selector A

0,1,2,1

Inline

Class

Element

#headerid

ID selectors add 0,1,0,0.

0,1,0,0

.navclass

Class selectors add 0,0,1,0.

0,0,1,0

>combinator

Combinators affect matching structure but do not change specificity.

0,0,0,0

aelement

Element selectors add 0,0,0,1.

0,0,0,1

:hoverpseudo-class

Pseudo-classes add 0,0,1,0.

0,0,1,0

Quick reference

Inline style

1,0,0,0

#id

0,1,0,0

.class / [attr] / :hover

0,0,1,0

element / ::before

0,0,0,1

* and combinators

0,0,0,0

:where(...)

0,0,0,0

About

Calculate CSS selector specificity, compare two selectors, and break down exactly which IDs, classes, pseudo-classes, and elements contribute to the final score.

Accepted input

Accepts one CSS selector for single mode or two selectors in comparison mode. Complex selectors with :is(), :not(), :has(), and :where() are analysed locally.

How to use

Enter a selector to see its four-part specificity score immediately.
Open comparison mode when you want to see which selector wins in the cascade.
Review the token breakdown to understand which fragments are adding weight.
Use the quick reference panel when you need a reminder about pseudo-classes, pseudo-elements, and !important.

Tips

If two selectors have equal specificity, source order decides which one wins.
:where() always contributes zero specificity, even if the selector inside it looks heavy.

Outils liés

CSS Unit Converter Colour Contrast Checker Colour Format Converter