Toolsvana→Developer Tools→CSS Specificity Calculator

CSS Specificity Calculator

Calculate and compare CSS selector specificity scores

CSS Selector

Specificity Rules

ID Selectors

#header, #main, #footer

Classes, Attributes, Pseudo-classes

.class, [attr], :hover, :nth-child()

Elements, Pseudo-elements

div, p, span, ::before, ::after

The universal selector (*), combinators (+, >, ~, space), and :where() have no specificity. Inline styles override all selectors, and !important overrides everything.

Common Examples

About the Free CSS Specificity Calculator

The CSS Specificity Calculator is a free tool that helps web developers understand, calculate, and debug CSS selector specificity. Specificity is the algorithm browsers use to determine which CSS rule takes precedence when multiple rules target the same element. It is expressed as a three-part value (a, b, c), where each component represents a different category of selector weight.

Understanding CSS specificity is one of the most important skills for front-end developers. When styles are not being applied as expected, specificity conflicts are often the root cause. This calculator instantly breaks down any CSS selector into its specificity components, showing you exactly how many ID selectors (a), class/attribute/pseudo-class selectors (b), and element/pseudo-element selectors (c) contribute to the final score.

The tool includes a powerful compare mode that lets you place two selectors side by side to see which one wins in a specificity battle. This is invaluable when debugging CSS conflicts, refactoring stylesheets, or learning how the cascade works. Visual bar charts and color-coded breakdowns make specificity intuitive and easy to understand, even for developers new to CSS.

Key Features

Instant specificity calculation for any valid CSS selector
Visual bar chart showing the relative weight of IDs, classes, and elements
Color-coded breakdown of each selector component (IDs in red, classes in yellow, elements in blue)
Compare mode to pit two selectors against each other with winner/loser indicators
Support for complex selectors including pseudo-classes, pseudo-elements, and attribute selectors
Correct handling of :not(), :is(), and :where() pseudo-class specificity rules
14 preset examples covering common selector patterns for quick learning
One-click copy of specificity values to clipboard
Built-in specificity rules quick reference card
Dark mode support for comfortable use in any environment

How to Use the CSS Specificity Calculator

Enter a CSS selector: Type or paste any CSS selector into the input field. The specificity is calculated instantly as you type.
Review the breakdown: Examine the (a, b, c) specificity value, the visual bar chart, and the color-coded component breakdown to understand how the score is determined.
Try compare mode: Switch to compare mode to enter two selectors and see which one has higher specificity, with clear winner/loser/tie indicators.
Use preset examples: Click any of the 14 preset selectors to instantly see their specificity. In compare mode, presets fill the first empty selector field.
Copy the result: Click the copy button next to the specificity value to copy it to your clipboard for use in documentation or code comments.

Use Cases

Debugging CSS conflicts: Determine why one CSS rule overrides another by comparing their specificity scores and identifying the winning selector.
Stylesheet refactoring: Analyze selector specificity across your codebase to reduce overly specific selectors and improve CSS maintainability.
Learning CSS cascade: Use the visual breakdowns and preset examples to build an intuitive understanding of how specificity works in practice.
Code review: Quickly verify selector specificity during code reviews to prevent specificity wars and ensure consistent styling approaches.
Teaching & workshops: Use the compare mode and visual charts as a teaching aid in CSS workshops, bootcamps, and online courses.
CSS architecture planning: Plan selector strategies (BEM, OOCSS, utility-first) by understanding specificity implications before writing code.
Framework customization: Calculate specificity when overriding Bootstrap, Tailwind, or other framework styles to ensure your custom rules take precedence.

Frequently Asked Questions

Is this tool free?

Yes, the CSS Specificity Calculator is completely free to use. There are no usage limits, no account required, and no premium tiers. Calculate and compare as many selectors as you need.

Is my data secure?

Absolutely. All specificity calculations happen entirely in your browser. No CSS selectors or data are sent to any server. The tool works completely offline once loaded.

How does CSS specificity work?

CSS specificity is calculated as a three-part value (a, b, c). Column "a" counts ID selectors (#id), column "b" counts class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover), and column "c" counts type selectors (div, p) and pseudo-elements (::before). Higher values in earlier columns always win, regardless of later columns.

What about !important and inline styles?

Inline styles override all selector-based specificity, and !important overrides everything including inline styles. These are handled outside the (a, b, c) specificity system and are not calculated by this tool since they are not part of selector specificity.

How does :not() affect specificity?

The :not() pseudo-class itself contributes zero specificity, but its argument is counted normally. For example, :not(.active) adds (0, 1, 0) because .active is a class selector. Similarly, :is() takes the specificity of its most specific argument, while :where() always contributes zero specificity.

What happens when two selectors have equal specificity?

When two selectors have identical specificity values, the CSS cascade rule applies: the selector that appears later in the source code takes precedence. The compare mode will show a "TIE" indicator in this case.

Tips & Best Practices

Keep specificity low: Prefer class selectors over ID selectors to keep specificity manageable and make styles easier to override when needed.
Avoid !important: Using !important is a sign of specificity problems. Fix the root cause by adjusting selector specificity rather than adding !important declarations.
Use BEM or similar naming: Methodologies like BEM (Block Element Modifier) help maintain flat specificity by relying primarily on single class selectors.
Check before nesting: Deeply nested selectors like #main .content .sidebar .widget p accumulate high specificity. Use this calculator to verify before committing.
Leverage :where() for zero specificity: When writing utility styles or resets, wrap selectors in :where() to ensure they can be easily overridden.
Compare during debugging: When a style is not applying, use the compare mode to check if another selector is winning the specificity battle.