Developer Tools New Tool

Free Online CSS Specificity Calculator with Every Part Counted

Paste one selector or a list of them and read the real three number specificity, with every part of each selector labelled and counted. The awkward cases are handled properly: is, not and has take their heaviest argument, where is always zero, and an id inside an attribute selector is not an id.

Free Forever Nothing Uploaded Every part labelled Runs in your browser

Free Online CSS Specificity Calculator with Every Part Counted

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Specificity Calculator Everything happens in this tab. Nothing you paste is sent anywhere.

Your selectors

Specificity

Reading Show every part counted Sort by specificity, weakest first

Where inline styles and important sit

Transition and animation values in progress, which beat everything below.
!important in a user agent stylesheet, then a user stylesheet, then yours. Note that the order of the origins is reversed for important declarations.
!important on an inline style attribute.
An ordinary declaration on an inline style attribute. No selector can outrank this, whatever its tuple, which is why an inline style is often treated as a specificity of 1,0,0,0.
Ordinary declarations from your stylesheets, and only here does the three number tuple get consulted at all.

Inside that last step, origin and cascade layer are checked before specificity, and source order is only checked after it.

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Work Out CSS Specificity

A few steps, and nothing is uploaded.

Paste your selectors One per line. A comma separated list is split up, because each part of a list is counted separately and they often differ.

Read the tuple Three numbers: ids, then classes and attributes and pseudo-classes, then elements and pseudo-elements. They are compared column by column, never added up.

Check the parts Every piece of the selector is listed with what it counts as, so you can see exactly where a number came from, including the zeroes.

Compare two of them With two or more selectors the page says which wins and at which column it was decided, which is usually the answer you came for.

What to Know About Specificity

Including where it sits in the cascade, which is lower than you think.

Specificity is only the tie-breaker, and it is consulted late. The cascade checks origin and importance first, then cascade layers, then specificity, then source order. So a rule in an earlier @layer loses to one in a later layer no matter how specific it is, and an unlayered rule beats every layered one. That is the whole point of layers: a third party stylesheet put in an early layer can use ids freely and still never override your own unlayered rules. If two rules seem to disagree with what this page tells you, check which layer each one is in before doubting the tuple.

The three numbers are compared column by column, never added. A selector of 0,1,0 beats one of 0,0,11, because the second column is looked at first and 1 beats 0; there is no carrying and no total. Writing it as 011 against 001 is what leads people to imagine a base ten score, and it is also why eleven elements can never add up to one class. The columns are ids, then classes plus attributes plus pseudo-classes, then element types plus pseudo-elements.

:where() is zero, and :is(), :not() and :has() take their heaviest argument. :where(#a, .b) contributes nothing at all, which makes it the right tool for a low-specificity reset or a themeable component. :is(#a, .b) contributes 1,0,0, because the id is the most specific thing in the list, even when the element actually matched by the .b half. The functional pseudo-class itself never counts as a class; only its contents count.

This page counts selectors; it does not parse a stylesheet. Paste a selector, not a rule with a body, and do not expect it to resolve CSS nesting: a leading & takes the specificity of the parent selector, which this page cannot know, so it is counted as zero and flagged. It also cannot tell you which rule won on your real page, because that depends on layers, origins and source order that live in your files rather than in the selector text.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

Every part labelled Each piece of the selector listed with what it counts as, zeroes included.

The awkward cases right is, not, has, where, attribute selectors and pseudo-elements.

Real tuples Three columns compared column by column, with no invented total.

A winner and a reason Which selector wins, and the column where it was decided.

As you type No run button. The counts update while you edit the selectors.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Specificity Calculator

Specificity is three numbers, and almost every explanation of it gets at least one detail wrong. The usual mistakes are treating the three numbers as digits of a single score, counting the universal selector or a combinator as something, assuming a pseudo-element counts as a class, and treating :is() or :not() as a pseudo-class in its own right. Each of those produces an answer that looks plausible and is wrong.

So this page counts each part separately and shows its working. The parser walks the selector character by character, handling nested parentheses and quoted attribute values, and labels every piece: this is an id, this is an attribute selector so it counts as a class, this is a combinator so it counts as nothing, this :where() is zero no matter what is inside it. The tuple at the top is then just the sum of the labelled parts, which makes the result checkable rather than magic.

The comparison is the part people actually want. Given two selectors the page says which one wins and, more usefully, which column decided it, because that tells you what to change. The cascade ladder further down exists because specificity is much lower in the order of decisions than its reputation suggests: origin and layer are settled before anyone looks at these three numbers at all.

Frequently Asked Questions

The tuple, the functional pseudo-classes, layers and important.

No. It is three separate counts compared in order, so 0,1,0 beats 0,0,99. Nothing carries from one column into the next, which is why no amount of element selectors can ever outweigh a single class. Writing tuples with commas rather than as 010 is a good habit for exactly this reason.

The :not() itself counts for nothing, but its argument counts as if it were written normally, taking the most specific option if there is a list. So :not(.a) is 0,1,0 and :not(#a, .b) is 1,0,0. The same rule applies to :is() and :has(). Only :where() is different: it is always zero, whatever is inside it.

No, it counts as an attribute selector, which lands in the second column alongside classes. So [id="main"] is 0,1,0 while #main is 1,0,0, even though both match exactly the same element. This is occasionally used on purpose to target an element by id without the specificity that comes with the hash form.

Neither is part of the tuple. An inline style attribute is a separate, higher step of the cascade, so no selector can beat it on specificity alone, which is why people describe it as 1,0,0,0. !important is higher still and reverses the order of the origins, so an important declaration in a user stylesheet beats an important one in yours. Within one origin and layer, two important declarations are then compared by specificity as normal.

Check cascade layers first. An unlayered rule beats every layered rule, and later layers beat earlier ones, both before specificity is considered at all. After that, check the origin, check for an !important, and check source order, which only decides a tie once the tuples are identical. This page counts the selector text and cannot see any of those.