CSS Specificity Calculator

CSS specificity is the algorithm browsers use to determine which CSS rule to apply when multiple rules target the same element. It is expressed as a three-part value (a, b, c) where: a = number of ID selectors, b = number of class, attribute, and pseudo-class selectors, c = number of type (element) and pseudo-element selectors. The selector with the highest specificity wins. If specificities are equal, the last declared rule wins (cascade order).

Count three categories in the selector: (a) ID selectors (#id): each adds 1 to the 'a' column. (b) Class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover, :nth-child): each adds 1 to the 'b' column. (c) Type selectors (div, p, h1) and pseudo-elements (::before, ::after): each adds 1 to the 'c' column. The :not(), :is(), :has(), and :where() pseudo-classes have special rules: :not() and :is() take the specificity of their most specific argument; :where() contributes zero specificity.

Yes. A declaration with !important overrides any specificity value. If two conflicting declarations both have !important, then specificity rules apply again between those two. The !important rule is powerful but considered poor practice: it breaks the natural cascade and makes debugging harder. It is better to increase specificity by adding a more specific selector.

Inline styles (style='...') have a specificity higher than any selector combination except !important. They are represented as (1, 0, 0, 0) in the four-column specificity model that includes inline styles. In the three-column model (a, b, c), inline styles effectively have 'infinite' a value and always beat any selector-based rule.

The universal selector (*) has zero specificity (0, 0, 0). The same applies to combinators (+, >, ~, space, ||) and the :where() pseudo-class: they all contribute zero to specificity. A declaration with no selectors (though not valid CSS) would also have zero specificity.