CSS Specificity Calculator
Calculate exact CSS selector specificity score tuples (ID, Class, Element).
CSS Specificity Calculator
About CSS Specificity Calculator
The CSS Specificity Calculator & Selector Weight Analyzer evaluates CSS selectors, calculating 3-column specificity weight tuples ($A, B, C$ = IDs, Classes/Attributes/Pseudo-classes, Elements/Pseudo-elements) and determining cascade inheritance hierarchy.
How to Use CSS Specificity Calculator
Step 1
Type or paste one or more CSS selectors into the input fields.
Step 2
Inspect the calculated $(A, B, C)$ score breakdown.
Step 3
Compare competing selectors to see which rule wins precedence in the cascade.
Step 4
Follow recommendations to reduce high specificity.
Practical Use Cases for CSS Specificity Calculator
Debugging CSS Overrides & Cascade Conflicts
Diagnose why a CSS rule is being overridden by comparing selector specificity scores without relying on hacky `!important` declarations.
Refactoring Enterprise CSS Architecture
Audit style sheets to maintain low, predictable specificity scores across BEM, CSS Modules, and utility classes.
Input & Output Examples
Calculating Specificity for Complex Selector
Selector: "nav.main-nav #login-btn:hover a > span"
Score: (1, 2, 2) | 1 ID (#login-btn), 2 Classes/Pseudos (.main-nav, :hover), 2 Elements (a, span)
Key Features & Performance
- ✓Calculates standard 3-column specificity weight: $(A, B, C) = (\text{IDs}, \text{Classes/Attributes/Pseudos}, \text{Elements/Pseudo-elements})$.
- ✓Side-by-side selector comparator: shows which selector wins the CSS cascade race.
- ✓Supports modern selectors: `:is()`, `:where()` (0 specificity), `:not()`, `:has()`, and `:nth-child()`.
- ✓100% Client-Side parsing.
- ✓1-Click Copy specificity breakdown.
Key Terminology & Definitions
CSS Specificity Tuple $(A, B, C)$
The official W3C algorithm determining which CSS rule applies to an element when multiple competing rules match.
`:where()` Zero Specificity Pseudo-Class
A modern CSS pseudo-class that matches elements with exactly $(0, 0, 0)$ specificity, making it easily overridable.