CSS — Specificity

Two rules, one element — who wins?

p { color: gray; }
.note { color: blue; }

<p class="note">Which color?</p>

Blue — because .note (a class) outranks p (an element). That ranking is specificity.

The scoring system

Three columns: IDs · Classes/attributes/pseudo-classes · Elements

#header .nav a
   1  ·  1  · 1    → (1, 1, 1)

.menu li
   0  ·  1  · 1    → (0, 1, 1)

Compare left to right; first column that differs decides:

Selector	IDs	Classes	Elements
p	0	0	1
.note	0	1	0
p.note	0	1	1
#special	1	0	0
#special.note	1	1	0

(1,0,0) beats any number of classes — an ID outweighs everything below it.

Then source order breaks ties

Equal specificity → later rule wins:

.a { color: red; }
.b { color: green; }

<p class="a b">Green.</p>   /* .b came later */

Inline styles & !important

Two override levers above everything:

<p style="color: orange;">   <!-- inline: beats all selectors -->

p { color: red !important; }   /* beats even inline (usually) */

Full hierarchy:

!important declarations
  > inline style
    > id
      > class / attribute / pseudo-class
        > element
          > inherited / defaults

Why !important is a trap

It doesn't fix specificity problems — it escalates them. Once one !important exists, losing battles get answered with… more !important. Real fix pattern:

/* Instead of this fight: */
.card .title { color: teal !important; }

/* Raise legitimate specificity: */
.card .card-title.title { color: teal; }   /* no nukes needed */

Reserve !important for utility classes and third-party overrides.

Where beginners lose battles unknowingly

1. ID in the stylesheet — #main p now beats every future class-based attempt at those paragraphs
2. Chained selectors growing over time — each "fix" adds another link
3. Fighting framework styles with equal-or-lower specificity

Debugging workflow

1. DevTools → inspect element → Computed tab
2. Find the color property; crossed-out rules LOST, active rule WON
3. Read why it won (IDs? inline?) — then either match its level or restructure HTML/classes
4. Last resort only: bump specificity honestly or !important with a comment explaining why

Keeping scores low

• Style with single classes mostly (.btn, not div#app main section .btn)
• Never style via IDs (use them for JS hooks/anchors instead)
• Layers (modern CSS) can formalize precedence without wars:

@layer reset, components, utilities;

Later layers win regardless of internal specificity — the professional endgame.

Mini Practice

1. Predict winners for five mixed selectors; verify in DevTools.
2. Prove (0,2,0) beats (0,1,99-style element pile).
3. Create an unwinnable ID rule; then defeat it with inline and with !important.
4. Refactor an ID-styled rule into class styling.
5. Inspect any site's computed styles; find a crossed-out rule and explain its loss.

Next: z-index →