CSS Specificity Calculator

How CSS Specificity Works

CSS specificity determines which rule wins when multiple declarations target the same element and property. It is expressed as three components (a, b, c):

• a — count of ID selectors (#id)
• b — count of class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover)
• c — count of type selectors (div, p) and pseudo-elements (::before)

Comparison is left-to-right: a higher a value always beats a lower one regardless of b or c. The universal selector (*) and combinators have no specificity.

Special Cases

• :where() — always zero specificity, regardless of its arguments
• :is(), :not(), :has() — take the specificity of their most specific argument
• !important — overrides specificity entirely; not calculated here
• Inline styles — always win over stylesheet rules (treated as a=1000 conceptually)

Tiebreaker Rule

When two selectors have identical specificity, the rule that appears later in the stylesheet wins — this is the cascade order. This calculator highlights ties so you know to rely on source order.