CSS Specificity Calculator

CSS specificity is the algorithm browsers use to determine which CSS rule applies when multiple rules target the same element. Every CSS selector has a specificity value calculated from its components: inline styles have the highest specificity, followed by IDs, then classes/attributes/pseudo-classes, and finally elements/pseudo-elements. When two rules conflict, the one with higher specificity wins — regardless of source order.

Specificity is represented as a tuple of four values: (inline, IDs, classes, elements). For example, #header .nav a has specificity (0, 1, 1, 1) — one ID, one class, one element. div.container > ul li a.active has specificity (0, 0, 2, 4) — two classes and four elements. Understanding specificity is essential for debugging CSS cascade issues and writing maintainable stylesheets.

This CSS specificity calculator lets you input selectors and instantly see their specificity scores, compare multiple selectors side by side, and understand which rule will win in a conflict. It's an essential debugging tool for CSS developers working with complex stylesheets. All calculations happen in your browser.

1. Enter a CSS selector — Type or paste any CSS selector to see its specificity score broken down into ID, class, and element components.
2. Compare selectors — Enter multiple selectors to compare their specificity values side by side and determine which one wins.
3. Understand the breakdown — Each selector shows its specificity as (IDs, Classes, Elements) along with the total weight, making it easy to see why one selector overrides another.
4. Debug cascade issues — When your CSS isn't applying as expected, paste both the expected and actual winning selectors to see which has higher specificity.

• Instant calculation — Specificity is calculated in real time as you type, with no delay or button press needed.
• Visual breakdown — See specificity decomposed into its three components: IDs (most specific), classes/attributes/pseudo-classes, and elements/pseudo-elements.
• Selector comparison — Compare multiple selectors to determine which one wins in a specificity conflict.
• Complex selector support — Handles combinators (>, +, ~), pseudo-classes (:hover, :nth-child), pseudo-elements (::before), attribute selectors, and more.
• Educational tool — Helps developers learn and internalize specificity rules by providing immediate visual feedback.
• 100% client-side — All calculations happen in your browser. No data is sent to any server.

• Debugging style overrides — When a CSS rule isn't applying, compare its selector's specificity against the winning rule to understand the cascade.
• Refactoring CSS — Evaluate selector specificity across your stylesheet to identify overly specific selectors that make maintenance difficult.
• Code review — Check that new selectors have appropriate specificity levels during code reviews to prevent cascade issues.
• Learning CSS — Use the calculator as a teaching tool to understand specificity rules and build intuition for the CSS cascade.
• Avoiding !important — Instead of reaching for !important, use the calculator to find the right specificity level that naturally overrides conflicting rules.