CSS Specificity Calculator: Calculate the Specificity of Any CSS Selector
Calculate the specificity score of any CSS selector instantly, understand why your styles are being overridden, and compare multiple selectors side by side.
Try the free online tool
Runs entirely in your browser — no signup, no uploads.
CSS specificity is the algorithm browsers use to determine which CSS rule wins when multiple rules apply to the same element. It is one of the most common sources of confusion and frustration in CSS — the rule you wrote last does not always win, and adding more properties does not always help. Understanding specificity is essential for writing CSS that behaves predictably and is easy to maintain.
Our CSS Specificity Calculator lets you type any CSS selector and instantly see its specificity score broken down into its component values: ID selectors (a), class/attribute/pseudo-class selectors (b), and element/pseudo-element selectors (c). You can compare multiple selectors side by side to see at a glance which one will win, and the tool highlights which part of each selector contributes to each component of the score.
The calculator also explains why a specific rule might be losing to another, and suggests lower-specificity alternatives where applicable. Understanding and managing specificity is fundamental to writing scalable CSS that does not require increasingly specific overrides to maintain.
What Is CSS Specificity?
CSS specificity is a numeric weight assigned to a CSS selector that determines its priority when multiple rules target the same element and property. A rule with higher specificity overrides a rule with lower specificity, regardless of which appears later in the stylesheet. Only when specificity is equal does source order determine the winner.
Specificity is calculated as a three-part score (a, b, c): 'a' counts ID selectors (#id), 'b' counts class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover, :nth-child), and 'c' counts element selectors (div, p) and pseudo-elements (::before, ::after). Each part is compared in order — a higher 'a' value always beats any amount of 'b' or 'c' values, like digits in a higher place value.
Certain rules override the specificity algorithm entirely. The !important declaration makes a rule override all non-important rules regardless of specificity. Inline styles have the highest specificity of any selector. The :is(), :not(), :has(), and :where() pseudo-classes have special specificity rules — :where() always has zero specificity while :is() and :not() take the specificity of their most specific argument.
How to Use This Tool
Calculate and compare CSS selector specificity in seconds:
- 1
Enter a Selector
Type any CSS selector into the input field — simple selectors like .button, compound selectors like nav > ul > li > a, or complex selectors using pseudo-classes and attribute selectors.
- 2
Read the Score Breakdown
The specificity score appears as (a, b, c) with each component highlighted. A color-coded breakdown shows exactly which parts of your selector contribute to each component.
- 3
Add More Selectors to Compare
Click 'Add Selector' to enter a second or third selector. All selectors appear in a comparison table sorted by specificity, with the winning selector highlighted at the top.
- 4
Understand the Explanation
Read the plain-English explanation below the score. It lists each significant selector component — IDs, classes, elements — and its contribution, making the score easy to understand.
- 5
Get Alternative Suggestions
If your selector's specificity is unusually high, the tool suggests lower-specificity alternatives that achieve the same targeting, helping you avoid specificity wars.
Common Use Cases
A specificity calculator is most valuable when debugging unexpected CSS behavior:
- Diagnosing why a style is being overridden by another rule — comparing the two selectors' specificity scores reveals which one wins and why
- Planning component styles in a design system to ensure component-level selectors have lower specificity than utility overrides, maintaining the intended cascade
- Auditing a stylesheet for excessively high-specificity selectors that will make future overrides difficult or require !important hacks
- Learning CSS cascade rules interactively by typing selectors and observing how adding an ID, class, or pseudo-class changes the score
- Code reviewing CSS selectors in pull requests to flag selectors that are unnecessarily specific or that will be difficult to override in consumer codebases
Tips and Best Practices
Manage specificity proactively to keep your CSS maintainable:
- Prefer class selectors over ID selectors for component styling — IDs have dramatically higher specificity (1,0,0 versus 0,1,0) and make overrides much harder
- Avoid qualifying class selectors with element names (div.button instead of .button) — it doubles the specificity without adding meaningful targeting benefit
- Keep specificity as flat and consistent as possible within a project — specificity that grows over time leads to an escalating arms race of increasingly specific selectors and !important declarations
- Use the :where() pseudo-class to wrap high-specificity parts of complex selectors and zero out their contribution: :where(#sidebar) .nav-link has specificity (0,1,0) instead of (1,1,0)
- Reserve !important for utility classes that must always win (like .visually-hidden or .sr-only) rather than using it as a quick fix for specificity conflicts
Frequently Asked Questions
How is CSS specificity calculated?
Specificity is calculated as a three-part value (a, b, c): count ID selectors for 'a', class/attribute/pseudo-class selectors for 'b', and element/pseudo-element selectors for 'c'. Comparison is done from left to right — a higher 'a' value wins over any number of 'b' or 'c' values. The universal selector (*) and combinators (+, >, ~, space) contribute zero specificity.
Does !important override specificity?
Yes. !important declarations enter a separate 'important' layer of the cascade that overrides all non-important declarations regardless of specificity. When two rules both use !important, specificity is then used to determine which !important rule wins. Use !important sparingly and only for utility classes or user-agent overrides.
What specificity do inline styles have?
Inline styles (style attribute on an HTML element) have a specificity of (1,0,0,0) — often written as the 'inline' component above the ID component. They override all selector-based CSS rules except those marked with !important. Inline styles should be avoided in production code because they are the hardest to override.
What is the specificity of :is(), :not(), and :has()?
These pseudo-classes take the specificity of their most specific argument. :is(#id, .class) has specificity (1,0,0) because the most specific argument is #id. :not(.active) has specificity (0,1,0). :where() is unique — it always has zero specificity (0,0,0) regardless of its contents, making it useful for low-specificity selectors.
Does the order of selectors in a stylesheet matter?
Order matters only as a tiebreaker when specificity is equal. If two rules have identical specificity and target the same element and property, the rule that appears later in the stylesheet wins. Specificity always takes precedence over source order — a later rule with lower specificity loses to an earlier rule with higher specificity.
What are specificity wars and how do I avoid them?
Specificity wars occur when developers repeatedly add more specific selectors or !important to override previous rules, creating an escalating cycle. Avoid them by keeping specificity flat from the start — use only class selectors for component styles, use :where() for base styles, and use a methodology like BEM or CSS Layers to establish clear specificity layers.
What are CSS Cascade Layers and how do they affect specificity?
CSS Cascade Layers (@layer) let you define named layers of CSS where the layer order determines priority, completely separate from specificity. Styles in a later layer override styles in an earlier layer regardless of specificity. This gives you explicit control over the cascade without manipulating selector specificity, and is the modern solution to specificity wars.
Ready to use this tool?
Free, instant, no account required. Runs entirely in your browser.