How to Talk About CSS Specificity Without Tears

CSS specificity feels arbitrary until you stop thinking of it as a number and start thinking of it as a tuple.

The tuple

Every selector has a specificity of (a, b, c):

• a — count of ID selectors
• b — count of class selectors, attribute selectors, and pseudo-classes
• c — count of element selectors and pseudo-elements

Compare tuples left-to-right, like words in a dictionary. (0, 1, 0) beats (0, 0, 99). One class beats ninety-nine elements.

The four rules that decide everything

1. Higher specificity wins.
2. If specificity ties, source order wins — the later rule applies.
3. !important jumps to a higher layer of specificity, but !important on a more specific selector still wins.
4. Inline styles count as (1, 0, 0, 0) — they beat selector specificity but not !important.

The interview-killer follow-up

"What's the specificity of :is(.btn, #cta) > a?"

The trick: :is() takes the specificity of its most specific argument. So #cta wins inside, giving the whole selector (1, 0, 1). People miss this constantly.

When to use what

Use classes for almost everything. Reach for IDs only when uniqueness is structural. Reach for !important only in utility frameworks or to override third-party code you don't control. If you say this out loud in an interview, you sound senior.