CSS Selector (updates live)
Try an example:
Compare additional selectors
What This Tool Does
Calculates CSS specificity for any selector and displays the (a, b, c) breakdown with visual bar charts. Add comparison selectors to see which would win a specificity conflict. Updates live as you type.
Frequently Asked Questions
How is CSS specificity calculated?
Specificity is expressed as three numbers (a, b, c): a = number of ID selectors (#id), b = number of class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover), c = number of element type selectors (div, p) and pseudo-elements (::before). Inline styles have a higher specificity of (1,0,0,0). !important overrides specificity entirely.
How do you compare specificity values?
Compare left to right: a higher "a" value always wins regardless of b or c. If a is equal, compare b. If b is equal, compare c. For example, (0,2,0) beats (0,1,10) because 2 > 1 at the b position.
Does the universal selector (*) add specificity?
No. The universal selector (*), combinators (+, >, ~, space), and the :where() pseudo-class all have zero specificity. The :is() and :not() pseudo-classes take the specificity of their most specific argument.
What is !important and how does it affect specificity?
!important overrides all specificity calculations for that property. Two competing !important declarations then fall back to specificity to determine the winner. It is generally considered bad practice as it makes debugging difficult — prefer increasing specificity through better selectors.