Contact

Tools  /  CSS  /  CSS Specificity Calculator

CSS

CSS Specificity Calculator

The (inline, ID, class/attr/pseudo-class, element) specificity of one or more selectors -- compare several side by side to see which wins, with :is()/:not()/:where() handled per spec and a color-coded breakdown of every part.

More CSS tools

CSS Card Generator CSS Tooltip Generator CSS Toggle / Switch Generator CSS Spinner / Loader Generator CSS Skeleton Loader Generator CSS Badge Generator

What this tool does

Calculates the specificity of one or more CSS selectors as the standard 4-part tuple — inline style, ID count, class/attribute/ pseudo-class count, element/pseudo-element count — and compares multiple selectors side by side to show exactly which one wins and why.

Getting :is(), :not(), :where() and :has() right

These functional pseudo-classes are a common source of wrong specificity calculations, because their contribution isn't the sum of their arguments' specificity — it's the single highest- specificity argument among them. :where() is the exception: it always contributes zero specificity regardless of what's inside it, by spec design. This calculator implements both rules correctly, including nested and comma-separated arguments.

Comparing multiple selectors

Add any number of selectors, each with its own optional !important toggle, and see them ranked with the actual winner highlighted — since specificity questions almost always come up as "why does THIS rule beat THAT one," not in isolation.

Colour-coded breakdown

Each selector is broken down piece by piece — IDs, classes/ attributes/pseudo-classes, elements/pseudo-elements — colour- coded directly in the selector text itself, so it's clear which part contributed to which count rather than just a final number.

Ready-made examples

Ten example selectors — a BEM class, an ID+class combo, an attribute selector, a :not() example, an :is() example, a :where() example (demonstrating its zero weight), a pseudo-element, and a deeply nested selector — load instantly to explore how specificity behaves in each case.

Privacy

Everything runs locally in your browser -- nothing you type is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?
No. Every calculation runs entirely in the browser -- nothing you type is sent to a server.
Does :is() add up the specificity of all its arguments?
No -- it's a common mistake, but :is() (and :not(), :has()) contribute only their single highest-specificity argument, not the sum of all of them. This calculator implements that rule correctly.
Why does :where() always show zero specificity?
By spec design -- :where() is specifically defined to always contribute zero specificity regardless of what selectors are inside it, unlike :is() and :not() which do contribute their highest argument.
Can I compare more than two selectors at once?
Yes -- any number of selectors can be added, each with its own !important toggle, and the actual winner is highlighted based on real CSS cascade rules.
How is !important handled in the comparison?
!important on any selector beats every non-important selector regardless of specificity, matching real CSS cascade behaviour -- specificity only decides ties among selectors at the same importance level.
Are pseudo-elements counted the same as classes?
No -- pseudo-elements (::before, ::after, and legacy single-colon forms like :before) count toward the element specificity tier, while pseudo-classes (:hover, :not(), etc.) count toward the class/attribute tier -- a distinction this calculator makes correctly.
Theme Accent