UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

CSS Specificity Calculator

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

About CSS Specificity Calculator

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 CSS Specificity Calculator

  • Instantly calculates specificity for any valid CSS selector.
  • Side-by-side comparison shows which selector wins the cascade.
  • Explains each component (IDs, classes, elements) with a breakdown.
  • Handles modern pseudo-classes including :is(), :where(), and :has().
  • 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.

How to use CSS Specificity Calculator

  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.
  5. Hover any selector in the comparison table to see a per-component breakdown (IDs, classes, elements).
  6. The tool ranks all selectors and highlights the one with highest specificity (the winner of the cascade).
  7. Use the 'simplify' suggestion to reduce specificity where possible — over-specific selectors are an anti-pattern.

When to use CSS Specificity Calculator

  • 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

Output: Specificity: (0, 3, 0) — three classes/pseudo-classes, no IDs, no elements.

ID overrides classes

Input: #header .logo:hover vs .header .logo:hover

Output: (1, 2, 0) vs (0, 3, 0) — the ID-prefixed version wins regardless of source order.

:where() neutralization

Input: :where(#main, .container) p

Output: Specificity: (0, 0, 1) — :where() contributes 0; only the p element counts.

:is() inherits highest argument

Input: :is(#a, .b, span) p

Output: 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 Box Model Visualizer Visualize the CSS box model interactively — adjust margin, border, padding, and content size to understand element dimensions. CSS Minifier Minify CSS by removing comments and whitespace CSS Beautifier Beautify CSS with clean indentation and optional comment preservation. CSS Gradient Generator Create linear or radial gradients with stops, angles, and copy-ready background snippets. CSS Triangle Generator Create directional CSS triangles using the transparent border technique with sizing controls. CSS Spinner Generator Browse spinner presets, tweak size speed and color, and copy animation-ready CSS.
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 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 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

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.