Skip to content
ToolBoxGeniehome

CSS Specificity Calculator

Developer Tools · Added

Paste a selector and see its specificity as the three numbers the cascade actually compares. Paste several and the tool marks the winner — including the case where two tie and source order decides. The breakdown names every part and says which column it counted in.

One per line, or separated by commas. Paste the selector only, without the braces.

Try:

How to use the css specificity calculator

  1. 1Paste one selector, or several separated by commas or line breaks.
  2. 2Read the A-B-C triple: IDs, then class-level selectors, then type-level ones.
  3. 3Check the breakdown table to see which part of the selector produced which number.
  4. 4With more than one selector, look for the highlighted winner — or the note that says they tie.

Examples

A typical nested selector

Input
#header .nav li a:hover
Result
1-2-2 — one ID, one class and one pseudo-class, two type selectors

:where costs nothing

Input
:where(#title) span
Result
0-0-1 — the ID inside :where contributes nothing, leaving only the span

The same selector with :is instead would be 1-0-1.

About the css specificity calculator

The number that fixes today's bug and causes next month's

The quickest way to make a stubborn rule apply is to make its selector more specific — add the parent ID, add another class, reach for !important. It works immediately, and it raises the floor for every rule that comes after: the next person who needs to override your rule has to be more specific still.

This is how a stylesheet ends up with selectors five levels deep and a scattering of important declarations. Knowing the actual triple is what lets you make the smallest change that wins rather than the largest one you can think of.

Keeping specificity flat on purpose

Modern CSS gives you tools for this. Cascade layers let you declare that one group of rules always loses to another regardless of specificity. The :where pseudo-class lets you match broadly at zero cost, so resets and defaults do not have to be fought.

Where neither is available, a naming convention that keeps most selectors to a single class does the same job by discipline: if nearly everything is 0-1-0, then the ordinary way to override something is to write a rule after it, which is the behaviour most people expect in the first place.

Frequently asked questions

Why three numbers instead of one?
Because the columns are compared in order and never carry. Writing the triple as a base-10 number suggests that ten classes add up to one ID, and they do not: 0-10-0 loses to 1-0-0 every time, and so would 0-100-0. The comparison stops at the first column where the two differ.
How do :is, :not, :has and :where count?
The first three take the specificity of their most specific argument and add nothing of their own, so :is(h1, #title) is worth a whole ID because #title is in there. :where is defined as zero however specific its contents, which is the entire reason it exists — it lets you write a broad default that anything can override.
Where do !important and inline styles fit in?
Neither is part of the triple. An inline style attribute beats any selector, and !important moves the declaration into a different cascade origin altogether rather than raising its specificity — which is why the only thing that overrides an important declaration is another important one, resolved by the origin rules and then by specificity within them.
Two of my selectors show the same triple. Which applies?
Both do, and the one written later in the stylesheet takes effect. That is the cascade falling through to source order, and it is why moving a rule up or down a file can change the page while the selectors stay identical.

Related tools