CSS Specificity Calculator
Calculate and compare CSS selector specificity.
vs
Frequently Asked Questions
What do the three numbers in specificity mean? +
The three numbers represent (a) ID selectors, (b) class selectors, attribute selectors, and pseudo-classes, and (c) element selectors and pseudo-elements. Higher numbers win in cascade order.
How does specificity affect which styles apply? +
When multiple CSS rules target the same element, the browser compares specificity from left to right. A selector with more IDs always beats one with fewer, regardless of class or element count.
Does the universal selector (*) affect specificity? +
No. The universal selector, combinators (+, >, ~, space), and the negation pseudo-class :not() itself contribute zero specificity. Only the selectors inside :not() count.
Where does !important fit in specificity? +
The !important declaration overrides normal specificity entirely. It is not part of the specificity calculation but creates a separate layer of priority above all normal rules.