CSS Specificity Calculator
This CSS specificity calculator instantly computes selector weight scores to help developers debug cascade conflicts and understand why certain styles override others. Enter a selector like #nav .menu > li:hover and get its (a, b, c) specificity tuple. Compare multiple selectors to see which wins. Solves common frustrations like unexpected color overrides, margin collisions, and the mystery of why your new rule doesn't apply. No installation, instant results in your browser. Method details for CSS Specificity Calculator: Processing follows explicit developer-facing rules for api payload shape, json/yaml structure, schema validation, and when applicable regex, hash, and checksum behavior.
Specificity Results
How to Read Specificity
(a, b, c)where:- a = ID selectors (#id)
- b = Class selectors (.class), attribute selectors ([type="text"]), pseudo-classes (:hover)
- c = Element selectors (div, p), pseudo-elements (::before)
- Higher numbers win. Compare left to right: (1,0,0) beats (0,99,99)
How to Use This Tool
- Enter a Selector - Type a CSS selector in the first input for instant calculation, or paste multiple selectors (one per line) in the textarea to compare them
- View Specificity - Results show as (a, b, c) where a = IDs, b = classes/attributes/pseudo-classes, c = elements/pseudo-elements
- Compare Rules - When entering multiple selectors, they auto-sort by specificity. The highest wins and is marked with a green WINS label
- Debug Conflicts - Use the comparison feature to understand why one rule overrides another in your stylesheet
Why Use This Tool?
CSS specificity determines which styles apply when multiple rules target the same element. Each selector gets a three-part score (a, b, c). IDs (#header) contribute to a, classes, attributes, and pseudo-classes (.nav, [type='text'], :hover) contribute to b, and element selectors and pseudo-elements (div, ::before) contribute to c. Comparison works left to right: (1,0,0) beats (0,99,99) because IDs always outrank classes. Inline styles beat all selectors, and !important overrides everything (avoid it).
Developers encounter specificity bugs daily. You write .button { color: blue; } but the button stays red because somewhere upstream there's #app .button { color: red; } (specificity 1,1,0 beats 0,1,0). Instead of adding !important (technical debt), use this calculator to find the conflict. Increase specificity strategically by adding parent selectors or classes. Frameworks like Tailwind avoid this with utility classes (all 0,1,0), but custom CSS requires understanding the cascade.
This tool parses selectors with regex to count IDs (#id), classes (.class), attributes ([attr]), pseudo-classes (:hover, :nth-child), elements (div, p), and pseudo-elements (::before, ::after). It handles complex selectors with combinators (>, +, ~) and negation pseudo-classes. The multi-selector comparison feature sorts results automatically so you can visually see why one rule wins. Use this to eliminate !important spam, refactor bloated CSS, and master the cascade instead of fighting it.