A CSS specificity calculator shows you the (a,b,c) specificity score for any CSS selector. Understanding specificity is essential for debugging cascade conflicts — when two rules target the same element, the one with higher specificity wins.
Enter CSS Selectors
One selector per line. Leave blank lines to separate groups.
Specificity Legend
Specificity Quick Reference
| Selector | a,b,c | Numeric |
|---|---|---|
| * | 0,0,0 | 0 |
| li | 0,0,1 | 1 |
| ul li | 0,0,2 | 2 |
| .active | 0,1,0 | 10 |
| a:hover | 0,1,1 | 11 |
| .nav .item | 0,2,0 | 20 |
| #sidebar | 1,0,0 | 100 |
| #sidebar .widget h2 | 1,1,1 | 111 |
How to Use the CSS Specificity Calculator
CSS specificity determines which style wins when multiple rules apply to the same element. This calculator helps you debug cascade conflicts and write more predictable CSS.
Step 1: Enter Your Selectors
Type or paste CSS selectors, one per line. Enter multiple selectors to compare their specificity scores. The calculator shows which selector wins when they conflict on the same property.
Step 2: Read the (a,b,c) Score
The specificity score has three components: a (red) counts inline styles and #id selectors; b (amber) counts .class selectors, [attribute] selectors, and :pseudo-classes; c (blue) counts element selectors (div, span) and ::pseudo-elements. Comparison is left-to-right: a=1 always beats a=0.
Step 3: Resolve Conflicts
When two rules have the same specificity, the rule that appears later in the stylesheet wins (source order). When specificity differs, higher specificity always wins regardless of source order. Use this to understand why a style is being overridden unexpectedly.
Common Gotchas
The :not() pseudo-class has zero specificity but its argument counts: :not(.active) = (0,1,0). The :is() and :has() pseudo-classes take the specificity of their most specific argument. Combinators (+, >, ~, space) add zero specificity.
FAQ
Is this CSS specificity calculator free?
Yes, completely free. All calculations run in your browser using JavaScript.
What is CSS specificity?
CSS specificity determines which style rule applies when multiple rules target the same element. It is calculated as a three-part score (a,b,c) where a = inline styles and ID selectors, b = class selectors, attribute selectors, and pseudo-classes, and c = element selectors and pseudo-elements. The selector with the highest specificity wins.
Why does #id have higher specificity than .class?
IDs contribute to the 'a' component of specificity while classes contribute to 'b'. The a-b-c score is compared left-to-right: a=1 always beats a=0 regardless of b and c values. This is why an ID selector (1,0,0) always overrides any number of class selectors like (0,10,0).
How do I override a high-specificity selector?
Options in order of preference: (1) Add more specific selectors — scope with a parent ID. (2) Restructure HTML to match a more specific selector. (3) Use !important on the property (use sparingly — it removes specificity from the cascade). (4) Use CSS custom properties (variables) which are inherited and harder to override.
Does :not() add to specificity?
The :not() pseudo-class itself has zero specificity, but its argument contributes. :not(.active) has the same specificity as .active (0,1,0). :not(#id) contributes the same specificity as #id (1,0,0). This is a common gotcha.
What is the specificity of the universal selector *?
The universal selector * has zero specificity (0,0,0). It matches every element but will be overridden by any other selector, including a bare element selector like div (0,0,1).