How specificity works
When two rules target the same element, the browser picks the more specific one. Specificity is counted as three numbers (a, b, c):
- a — number of ID selectors (
#header) - b — number of class, attribute (
[type=text]) and pseudo-class (:hover,:nth-child()) selectors - c — number of type (
div) and pseudo-element (::before) selectors
Compare left to right: (1,0,0) beats (0,5,0); (0,2,0) beats (0,1,3). The universal selector *, combinators (> + ~) and :where() add nothing.
Modern selectors
:is()/:has()— count the most specific argument inside them.:where()— always zero specificity (that's its superpower).:not()/:is()/:has()— count the most specific selector list inside them (e.g.:not(#x)adds an ID).:nth-child()and similar An+B pseudo-classes count as one pseudo-class.!important— overrides normal specificity entirely; equal-importance ties fall back to source order.- Inline styles beat any selector (except
!important), and are outside this model.
Practical takeaway
If a style "isn't applying", the almost-always cause is specificity — your other rule has a higher (a,b,c). The calculator shows you the numbers so you can decide: raise yours (add a class or ID), or lower theirs (use :where() to zero out a wrapper selector).