CSS Specificity Calculator

Specificity is the algorithm browsers use to determine which CSS rule applies when multiple rules target the same element. It's expressed as (a,b,c) where a=IDs, b=classes/attributes/pseudo-classes, c=elements/pseudo-elements.

The calculator counts IDs (a), classes + attributes + pseudo-classes (b), and type selectors + pseudo-elements (c). The result is displayed as (a,b,c). A selector like #nav .item a has specificity (1,1,1).

Check specificity — a more specific rule may be overriding yours. Check for !important elsewhere. Check if the property is inherited or if the element has inline styles. Use browser DevTools to see which rules apply and which are overridden. The specificity calculator helps identify conflicts.

Generally, yes. Overly specific selectors make CSS hard to maintain and override. Aim for low-specificity selectors using classes only (e.g., .button instead of div#main .button). This makes your CSS more modular, reusable, and easier to refactor. Use methodologies like BEM to manage specificity.

Yes. It parses combinators, pseudo-classes (:hover, :nth-child), pseudo-elements (::before, ::after), attribute selectors ([type="text"]), and universal selectors. The universal selector (*) contributes 0 to specificity.