CSS Specificity Calculator

Frequently Asked Questions

What is CSS specificity?

Specificity is the algorithm browsers use to determine which CSS rule takes precedence when multiple rules target the same element. It's calculated as a three-part score: (a) ID selectors, (b) class, attribute, and pseudo-class selectors, and (c) element and pseudo-element selectors. A higher score wins, regardless of the order rules appear in the stylesheet.

How does !important affect specificity?

!important overrides all specificity calculations and forces a declaration to win. It sits outside the normal specificity system entirely. If two declarations both use !important, then specificity applies between them. Overusing !important creates brittle stylesheets — prefer increasing selector specificity instead.

Do inline styles have higher specificity than IDs?

Yes. Inline styles (style="...") have a specificity of (1,0,0,0) — higher than any selector-based rule. They will override any selector-based styles except those marked !important.

Does the universal selector (*) have specificity?

No. The universal selector (*), combinators (+, >, ~), and the :not() pseudo-class itself contribute zero specificity — though the selectors inside :not() do count.

Related Tools