CSS Specificity Calculator

Specificity is three numbers (a, b, c). a counts ID selectors like #id. b counts classes, attribute selectors like [type=text] and pseudo-classes like :hover. c counts element types and pseudo-elements like ::before. Compare a first, then b, then c; the higher value wins.

The score is a flattened value, a times 100 plus b times 10 plus c, so a single selector is easy to compare at a glance. For everyday selectors it preserves the same order as the real cascade. When two selectors tie, the one declared later in the stylesheet wins.

These functional pseudo-classes add no specificity themselves, but their argument does. The calculator adds the specificity of the most specific selector inside them. So :not(.x) counts as one class, and :is(#a, p) counts as one ID. :where() always adds nothing.

The universal selector * and the combinators >, +, ~ and the descendant space add nothing to specificity. They affect what a selector matches but never how strongly it wins, so the calculator ignores them.

An inline style attribute, like style="color:red", beats any selector in a stylesheet. It is sometimes written as the (1,0,0,0) column ahead of IDs. Only !important or another inline style can override it, so this tool focuses on selector specificity, not inline styles.

No. The whole calculation runs in your browser with JavaScript. Nothing you type is uploaded or stored.