CSS Specificity Calculator

About this tool

The CSS Specificity Calculator counts the parts of a CSS selector and shows its specificity as three numbers: IDs, Classes (classes, attributes and pseudo-classes) and Elements, plus a Total computed as IDs×100 + Classes×10 + Elements. Specificity determines which rule wins when multiple selectors target the same element — higher specificity overrides lower, regardless of source order, unless !important is used. Type a selector in the first field and, optionally, a second selector to compare; the tool says which one wins or that they tie and source order decides. It counts plain IDs, classes, attributes, pseudo-classes, :not() arguments and element names as you type. It does not apply the special rules for :is(), :where() and :has(), counts ::before and other pseudo-elements as classes, and compares by the Total, so a selector with ten or more classes is wrongly ranked above one with an ID. Check those cases by hand.

Why use it

• Calculates specificity for everyday selectors as you type — no manual counting needed.

• Compares two selectors and states which one wins the cascade.

• Shows the IDs, Classes and Elements counts separately so you can see what drives the score.

• Runs entirely in your browser; selectors never leave the page.

How to use

1. Enter a CSS selector in the CSS Selector field (e.g. .card > h2:first-child).
2. Read the IDs, Classes, Elements and Total cards, which update as you type.
3. Optionally type a second selector in the Second Selector field.
4. Read the comparison line: First selector wins, Second selector wins, or Tie — source order decides.
5. For selectors using :is(), :where(), :has() or ::pseudo-elements, or with ten or more classes, verify the numbers by hand using the rules in the FAQ.

When it helps

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

Examples

.sidebar .nav-item.active

IDs 0, Classes 3, Elements 0 — Total 30

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

1, 2, 0 (Total 120) vs 0, 3, 0 (Total 30) — First selector wins (120 vs 30)

input[type="text"]

IDs 0, Classes 1, Elements 1 — Total 11

a:not(.x)

IDs 0, Classes 1, Elements 1 — Total 11

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

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.