CSS Specificity Calculator & Guide
CSS specificity determines which style rules apply when multiple rules target the same element. The specificity score is calculated based on the selector components: inline styles, IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements. Understanding specificity is essential for writing maintainable CSS and avoiding !important overuse.
Frequently Asked Questions
What is CSS specificity?
CSS specificity is a weight given to each CSS selector to determine which styles take precedence when multiple rules apply to the same element. Specificity is calculated as a score of four numbers: (inline, ID, class/attr/pseudo-class, element/pseudo-element). A higher score wins. If specificity is equal, the later rule in the stylesheet wins.
How is specificity calculated?
Specificity is calculated as 4 values: (a, b, c, d). "a" is 1 if inline style, 0 otherwise. "b" counts ID selectors. "c" counts class selectors, attribute selectors, and pseudo-classes (like :hover). "d" counts type selectors (HTML elements) and pseudo-elements (like ::before). The universal selector (*) has zero specificity.
What beats what in specificity?
Inline styles (1,0,0,0) beat ID selectors (0,1,0,0) which beat class/attribute/pseudo-class selectors (0,0,1,0) which beat element selectors (0,0,0,1). !important overrides all specificity. When specificity is equal, the declaration that appears last in the CSS wins.
When should I use !important?
Use !important sparingly. It makes CSS hard to maintain because it overrides all other specificity. Good use cases include overriding third-party library styles, utility classes that must always apply, and accessibility-related styles. Instead of !important, try using more specific selectors or restructuring your CSS.
Does the universal selector affect specificity?
No, the universal selector (*), combinators (+, >, ~, ||, and space), and the :is() pseudo-class have zero specificity. The :not(), :has(), and :is() pseudo-classes themselves have zero specificity, but their arguments do contribute to specificity.