A LITTLE HELP. A LOT DONE.
Good tools.
Great flow.

Your shortcut to the everyday. Create, convert, calculate,
and get back to what you love.

✓ Free to use✓ No sign-up✓ 500+ possibilities
Developer

CSS Specificity Calculator

Calculate and compare the specificity score of any CSS selector to understand cascade order and override priority.

Loading interactive tool…

About this tool

The CSS Specificity Calculator parses any CSS selector and computes its specificity score as a three-number tuple (a, b, c) representing inline styles, IDs, and classes/attributes/pseudo-classes respectively, plus the total specificity for comparison. Specificity determines which rule wins when multiple selectors target the same element — higher specificity overrides lower, regardless of source order, unless !important is used. The tool accepts multiple selectors for side-by-side comparison and ranks them so you can immediately see which selector wins. It handles compound selectors, pseudo-classes, pseudo-elements, attribute selectors, :not(), :is(), :where(), and :has().

Why use it

  • Instantly calculates specificity for any valid CSS selector — no manual counting needed.

  • Side-by-side comparison shows which selector wins the cascade and by how much.

  • Explains each component (IDs, classes, elements) with a breakdown.

  • Handles modern pseudo-classes including :is(), :where(), and :has().

How to use

  1. Enter a CSS selector in the input field (e.g. .card > h2:first-child).
  2. The specificity score (a, b, c) and numeric total are shown immediately.
  3. Add more selectors for side-by-side comparison.
  4. The tool ranks all selectors and highlights the one with highest specificity (the winner of the cascade).
  5. Hover any selector in the comparison table to see a per-component breakdown (IDs, classes, elements).
  6. Use the 'simplify' suggestion to reduce specificity where possible — over-specific selectors are an anti-pattern.

When it helps

  • Debugging why a CSS rule is not applying as expected.
  • Comparing two selectors to understand override order.
  • Learning CSS specificity rules without memorizing the algorithm.
  • Code reviewing CSS to identify over-specific selectors that make overrides hard.
  • Comparing two selectors to understand which one wins the cascade.
  • Code reviewing CSS to identify over-specific selectors that block component theming.

Examples

Compound class with descendant

Input
.sidebar .nav-item.active
Expected result
Specificity: (0, 3, 0) — three classes/pseudo-classes, no IDs, no elements.

ID overrides classes

Input
#header .logo:hover vs .header .logo:hover
Expected result
(1, 2, 0) vs (0, 3, 0) — the ID-prefixed version wins regardless of source order.

:where() neutralization

Input
:where(#main, .container) p
Expected result
Specificity: (0, 0, 1) — :where() contributes 0; only the p element counts.

:is() inherits highest argument

Input
:is(#a, .b, span) p
Expected result
Specificity: (1, 0, 1) — :is() picks up #a's ID weight, plus the trailing p element.

Tips

  • Aim for low, consistent specificity — most utility/component CSS should sit at (0,1,0) or (0,2,0). Big jumps mean specificity wars.
  • Use :where() to group selectors without raising specificity — perfect for CSS reset and base styles.
  • Avoid #id selectors in stylesheets; they jump specificity to (1,0,0) and force everything else to escalate or use !important.
  • Replace selectors like .nav .nav-item .nav-link with a single .nav__link BEM class to keep specificity flat.
  • If you must use !important, keep it scoped to utility classes (e.g. .hidden { display: none !important; }) — avoid it elsewhere.
  • Remember: the browser breaks specificity ties by source order — last declared wins, which is why CSS-in-JS libraries control insertion order carefully.

Frequently Asked Questions

What are the three numbers in specificity?
The tuple (a, b, c) represents: a = inline styles (always 1 for inline), b = number of ID selectors, c = number of class, attribute, and pseudo-class selectors + element/pseudo-element count.
Does !important override specificity?
Yes. !important overrides specificity entirely. Among !important rules, specificity still applies to determine which !important wins.
What specificity does :is() add?
:is() takes the specificity of its most-specific argument. For example, :is(#id, .class) has ID-level specificity (0,1,0).
Does :where() affect specificity?
No. :where() always has zero specificity regardless of its arguments — it is useful precisely because it allows selectors without adding specificity weight.
Which has higher specificity — ID or class?
ID selectors (#id) always win over class selectors (.class), regardless of how many classes are stacked.

Explore the category

CSS Beautifier Beautify CSS with clean indentation and optional comment preservation. CSS Minifier Minify CSS by removing comments and whitespace CSS Box Model Visualizer Visualize the CSS box model interactively — adjust margin, border, padding, and content size to understand element dimensions. CSS Grid Playground Prototype grid templates, gaps, and alignment with a responsive preview and CSS export. Tailwind Class to CSS Converter Look up what CSS properties any Tailwind CSS utility class generates, including responsive and state variants. JSON Formatter Format, validate and minify JSON
CSS Specificity: The Complete Guide to the Cascade and Inheritance CSS specificity is the invisible rule that decides which style wins when two selectors target the same element. Understanding it lets you de Apr 2026 · 9 min CSS Custom Properties (Variables) Explained with Real Examples CSS custom properties are far more powerful than SASS variables — they are live, inheritable, and can be changed with JavaScript at runtime. Apr 2026 · 8 min Flexbox vs Grid: When to Use Which CSS Layout System Flexbox and Grid are not competing technologies — they solve different layout problems. Knowing which to reach for makes your CSS cleaner an Apr 2026 · 9 min

Glossary

Specificity
A weight assigned to each CSS selector that determines which rule wins when multiple rules target the same element. Higher specificity overrides lower.
Specificity tuple (a, b, c)
Three-number representation: a = ID selectors, b = classes/attributes/pseudo-classes, c = elements/pseudo-elements. Compared left-to-right; (1,0,0) beats (0,99,99).
Cascade
The CSS rule resolution algorithm. After origin and importance, the cascade orders rules by specificity, then by source order to pick the winning declaration.
Specificity calculation
Count IDs (#id) into a, count classes (.cls), attributes ([attr]), and pseudo-classes (:hover) into b, count elements (div, p) and pseudo-elements (::before) into c.
:is() and :where()
:is() takes the specificity of its most specific argument. :where() always has zero specificity — useful for grouping without escalating.
:not()
Specificity equals the most specific selector inside the parentheses. For example, :not(#id) contributes (1,0,0).
:has()
Like :is(), :has() takes the specificity of its most specific argument. Useful for parent-style selection in modern browsers.
!important
Annotation that overrides the normal cascade. Among multiple !important rules, specificity still applies. Treat as a last resort.
Inline styles
style attribute values on the element. Specificity of (1,0,0,0) — higher than any external stylesheet selector. Only !important or a higher-origin override beats them.