CSS Specificity Auditor - Online Sort & Find Overrides

CSS specificity is the algorithm browsers use to decide which CSS declaration wins when multiple rules target the same element and property. It's calculated as a four-part weight (a, b, c, d): inline styles (a), ID selectors (b), class/attribute/pseudo-class selectors (c), and element/pseudo-element selectors (d). Understanding specificity helps you debug unexpected styling behavior and write more maintainable CSS.

The tool parses each selector and counts: b = number of #id selectors, c = number of .class, [attr], and :pseudo-class selectors, d = number of element names and ::pseudo-elements. The numeric score is b × 10,000 + c × 100 + d. The :where() pseudo-class contributes zero specificity, while :is() and :not() take the specificity of their most specific argument.

!important elevates a declaration above normal specificity comparisons. When two rules both use !important on the same property, the one with higher specificity wins. If specificity is equal, source order breaks the tie (last one wins). This tool highlights !important declarations with an orange badge so you can quickly spot them. Overusing !important is considered a bad practice as it makes CSS harder to maintain.

An override occurs when two or more CSS rules declare the same property with different specificity. The rule with higher specificity "wins" and its value is applied; the lower-specificity rule is "overridden." This tool detects potential overrides by grouping declarations by property name. A green status means all declarations in that rule are winning; yellow means partial override; red means the rule is fully overridden.

This tool identifies potential overrides by comparing properties across selectors. It cannot know your actual DOM structure — two selectors that target completely different elements (e.g., #header and .footer) won't truly override each other even if they share properties. Use the results as a guide to investigate potential conflicts, then verify in your browser's DevTools.

:is() and :not() take the specificity of their most specific argument. For example, :is(#hero, .card, p) has the specificity of an ID selector (b=1). :where() always contributes zero specificity, making it ideal for establishing base styles that are easy to override. :has() behaves like :is() — its specificity equals its most specific argument.

1. Prefer class-based selectors over ID selectors for styling. 2. Keep selector chains shallow (max 3 levels). 3. Use :where() for base/reset styles to keep them easily overridable. 4. Avoid !important unless absolutely necessary. 5. Follow a naming convention like BEM to reduce the need for deeply nested selectors. 6. Regularly audit your CSS with tools like this one to catch specificity inflation early.