Skip to main content
CSSpeek

Free tool

CSS Specificity Calculator

Paste one or more CSS selectors and see their specificity side-by-side. Works with every modern selector — including :is(), :not(), :has(), and :where().

Handles IDs, classes, attributes, pseudo-classes, pseudo-elements, and :is() / :not() / :has() / :where(). The calculation follows the CSS Selectors Level 4 specificity algorithm.

#main .card:hover .title1,3,0

Highest specificity — this selector wins the cascade.

Breakdown (4 parts)
  • id #main+1,0,0
  • class .card+0,1,0
  • pseudo-class :hover+0,1,0
  • class .title+0,1,0
.card:is(.card--large, .card--featured) .title0,3,0
Breakdown (3 parts)
  • class .card+0,1,0
  • is :is(.card--large, .card--featured)+0,1,0
  • class .title+0,1,0
header nav ul li a.active0,1,5
Breakdown (6 parts)
  • element header+0,0,1
  • element nav+0,0,1
  • element ul+0,0,1
  • element li+0,0,1
  • element a+0,0,1
  • class .active+0,1,0
.shortcut0,1,0
Breakdown (1 parts)
  • class .shortcut+0,1,0

Stop calculating specificity by hand

CSSpeek shows you the resolved computed style of any element on any website — no specificity math required. Add it to Chrome and see what the cascade actually produced.

Add to Chrome — Free

How specificity works

The CSS cascade uses three rules to decide which declaration applies to an element: importance (!important), specificity, and source order. This calculator handles the middle one.

Each selector is scored into a tuple (A, B, C):

Comparisons read left-to-right: a higher A beats any B or C, and so on. If two selectors tie, the rule that appears later in the source wins.

Specificity: frequently asked questions

What exactly is CSS specificity?
Specificity is the algorithm browsers use to decide which CSS rule applies when multiple rules target the same element. It produces a three-part number: (IDs, classes/attributes/pseudo-classes, elements/pseudo-elements). The higher tuple wins.
How does this calculator handle :is(), :not(), and :has()?
Per the CSS Selectors Level 4 spec, these functions take the specificity of their most-specific argument. For example, :is(.a, #b) contributes as if it were #b. The calculator mirrors this behavior.
What about :where()?
:where() always contributes zero specificity, by design. It's a useful way to write neutral utility rules that can be overridden easily.
Why are there three numbers instead of four?
The classical four-part tuple included inline styles as the first column. Modern CSS specificity is reported as three parts (A-B-C) because inline styles are handled separately in the cascade. This calculator uses the three-part form.
Is my input sent to a server?
No. The calculator runs entirely in your browser. Nothing you type is transmitted, stored, or logged.

More free CSS tools