🎨 CSS Specificity Calculator
A CSS specificity calculator that breaks any selector into its (ID, class, element) score and compares two selectors to show which wins the cascade.
Selector A wins (higher specificity)
What CSS Specificity Calculator Does
CSS specificity exists to answer one question when two rules both apply to the same element and conflict: which one wins. The algorithm — count IDs, then classes/attributes/pseudo-classes, then elements/pseudo-elements, and compare in that order — is deceptively simple to state and easy to get wrong by eye once selectors get more than a couple of parts long, which is exactly the gap a calculator closes.
The trickiest real-world cases are the "forwarding" pseudo-classes — :not(), :is(), and :has() — which were specifically designed not to add their own specificity weight, but instead to inherit the specificity of whichever argument inside them is most specific. :where() is the deliberate exception: it always contributes zero, specifically so authors have a tool for writing broadly-matching selectors without specificity side effects.
How to Use CSS Specificity Calculator
- Paste a CSS selector to see its (ID, class, element) specificity score
- Add a second selector to compare which one would win
- Read the breakdown to see exactly what each part of the selector contributed
Formula Used by CSS Specificity Calculator
Specificity comparison
Specificity = (A, B, C), compared left to right
- A
- Count of ID selectors
- B
- Count of class selectors, attribute selectors, and pseudo-classes
- C
- Count of type (element) selectors and pseudo-elements
Worked example
#nav ul li.active a vs. nav a:hover
- #nav ul li.active a → 1 ID, 1 class, 3 elements → (1, 1, 3)
- nav a:hover → 0 IDs, 1 pseudo-class, 2 elements → (0, 1, 2)
Result: (1,1,3) beats (0,1,2) — the ID selector alone decides it, regardless of the element counts
How to Read Your Result
A single ID always beats any number of classes
Because comparison is lexicographic (A first, fully, before B is ever considered), a selector with one ID and nothing else — (1,0,0) — outranks a selector with fifty chained classes and no ID — (0,50,0). This is precisely what makes over-reliance on ID selectors for styling a maintenance headache: nothing short of another ID (or !important) can override it.
!important and inline styles operate outside this system entirely
They are not higher specificity values within the (A,B,C) system — they are separate override mechanisms in the CSS cascade that take precedence before specificity comparison is even reached, which is part of why overusing !important makes a stylesheet's behavior hard to reason about later.
Limitations & Accuracy Notes
- This tool parses common selector syntax with a regex-based approach, not a full CSS selector grammar — deeply nested or unusual selector syntax may not parse perfectly.
- Does not account for cascade layers (@layer) or the CSS @scope proximity rules, both of which can affect which rule ultimately applies independent of raw specificity.
- Does not evaluate !important or inline style precedence, which override specificity comparison entirely.