CSS Specificity Calculator

CSS specificity determines which styles apply when multiple conflicting rules target the same element. Specificity is calculated as a three-part value (a, b, c): ID selectors contribute to a (#header = 1,0,0), class selectors, attribute selectors, and pseudo-classes contribute to b (.active, [type="text"], :hover = 0,1,0), and element selectors and pseudo-elements contribute to c (div, ::before = 0,0,1). Combinators (>, +, ~, space) and the universal selector (*) don't affect specificity. !important declarations override all specificity calculations, which is why their use is generally discouraged — they create maintenance nightmares when two !important rules conflict. Inline styles (style="...") have higher specificity than any selector-based rule. When two selectors have equal specificity, the one appearing later in the stylesheet wins (source order). The AllTools CSS Specificity Calculator breaks down the specificity of any CSS selector, showing the a,b,c values and comparing multiple selectors to identify which would win in a conflict. Understanding specificity is essential for debugging unexpected styling behavior — the tool processes your selectors entirely in the browser without transmitting your class naming conventions or application structure.

Specificity management is one of the most challenging aspects of CSS architecture in large applications. Specificity wars — where developers add increasingly specific selectors to override each other — create fragile, unmaintainable stylesheets. Several architectural patterns address this. BEM (Block Element Modifier) uses flat, single-class selectors (.block__element--modifier) that all have equal specificity (0,1,0), preventing conflicts. ITCSS (Inverted Triangle CSS) organizes CSS layers from low-specificity (settings, tools, generic) to high-specificity (components, utilities), ensuring later layers correctly override earlier ones. Utility-first CSS (Tailwind) avoids specificity issues entirely by using single utility classes. CSS Modules scope styles to components through generated unique class names, preventing cross-component conflicts. The modern CSS :where() pseudo-class has zero specificity regardless of its contents, enabling reset and utility styles that are easily overridable. The :is() pseudo-class takes the specificity of its most specific argument, useful for grouping selectors. CSS cascade layers (@layer) provide explicit override ordering independent of specificity, representing the latest evolution in specificity management.