🧮 Calculator
📋 Interactive Examples
Click a tab to load example selectors into the calculator.
📖 Specificity Reference
*
0,0,0,0 — Universal selector has no specificity
div, p, span
0,0,0,1 — Each element/pseudo-element adds 1
.class, [attr], :hover
0,0,1,0 — Classes, attributes, pseudo-classes add 1
#id
0,1,0,0 — Each ID adds 1
style=""
1,0,0,0 — Inline styles override all selectors
!important
Overrides everything — not part of specificity
:where()
0,0,0,0 — Zero specificity (forgiving)
:is() :not() :has()
Takes specificity of most specific argument
⚡ Features
Visual Score
Color-coded 4-column specificity breakdown at a glance
Side-by-Side Comparison
Rank up to 10 selectors and instantly see the winner
Full Selector Support
Parses IDs, classes, attributes, pseudo-classes/elements, :is/:not/:has/:where
Responsive & Fast
Works on any device, zero dependencies, instant results
❓ FAQ
What is CSS specificity?
CSS specificity is the algorithm browsers use to decide which CSS rule applies when multiple rules target the same element. It's represented as a 4-part value: (inline, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements). Higher values in leftmost positions win.
Does !important increase specificity?
No — !important is not part of the specificity score. It creates a separate cascade layer that overrides all normal specificity. When two rules both use !important, the one with higher specificity wins.
Why does :where() have zero specificity?
:where() is designed as a "forgiving selector" that intentionally contributes zero specificity, making it easy to override. In contrast, :is(), :not(), and :has() take the specificity of their most specific argument, so they can contribute significantly.