CSS Specificity Calculator

Calculate CSS selector specificity scores with a-b-c breakdown

What is it and how does it work?

CSS specificity is the algorithm browsers use to decide which CSS rule wins when multiple rules target the same element. It's calculated as a three-part score (A, B, C): A = inline styles, B = IDs, C = classes, attributes, and pseudo-classes, and C also includes element selectors and pseudo-elements (at a lower weight). The rule with the highest specificity score wins — regardless of source order. When scores are equal, the rule that appears later in the stylesheet wins.

This calculator takes any CSS selector and computes its specificity score, showing the (A, B, C) breakdown and helping you understand why one rule overrides another. It also compares two selectors and tells you which wins. Understanding specificity ends the trial-and-error cycle of adding !important to override styles — instead you can write the precise selector needed.

Common use cases

• Debug overrides: two rules both target .card h2 — one adds colour, but it's not working. Compare the selectors to find which has higher specificity and is winning.
• Refactor avoidance: before adding a new utility class, check that it doesn't already get overridden by an existing component selector with higher specificity.
• Interview prep: calculate the specificity of div.container > ul li.active::before to understand the scoring system.

Frequently asked questions

How is specificity calculated exactly?

Count: (inline styles = A), (IDs = B), (classes, attributes, pseudo-classes = C), (elements, pseudo-elements = C at lower weight but same slot in some framings). The traditional representation uses (0,0,0,0) with four values where the first is inline. Practically, it's (id-count, class-count, element-count). A single ID always beats any number of classes.

What does !important do to specificity?

!important overrides all specificity and source-order rules. It creates a separate "important" cascade layer that wins over everything except another !important with equal or higher specificity. Overusing it breaks the cascade and makes stylesheets hard to maintain — add it only when you genuinely cannot increase specificity.

Does specificity apply to inherited properties?

No. Inherited values have no specificity — any explicitly set value on the element wins over an inherited one, regardless of how specific the parent's selector was. Specificity only matters when multiple rules directly target the same element.

What is the specificity of :where() vs :is()?

:where() has zero specificity (it never contributes to the score) — useful for utility selectors that should be easy to override. :is() takes the specificity of its most specific argument — useful for grouping without losing specificity.

Developer

UUID Generator · Timestamp Converter · Base64 Encoder · Base64 Decoder · Hash Generator · Color Converter