Why Your CSS Rules Aren’t Applying: A 1‑Minute Guide to Selector Specificity

1. A Magic Scenario

Imagine a div with id="app" and class box that should be red, but the text appears blue. The reason is that ID selectors have the highest specificity.

<div id="app" class="box">What color should I be?</div>

#app { color: blue; }
.box { color: red; }
div { color: green; }

The final color is blue because the ID selector wins.

2. The "Four‑Digit" Specificity Weight

CSS assigns each selector a four‑digit weight (inline, ID, class/attribute/pseudo‑class, element/pseudo‑element). The larger the leftmost digit, the higher the priority.

Inline style – 1,0,0,0 ID selector – 0,1,0,0 Class, attribute, pseudo‑class – 0,0,1,0 Element, pseudo‑element – 0,0,0,1 Comparison is performed left‑to‑right; the first larger digit wins, with no carry‑over.

#app.box → 0,1,1,0

.box.active → 0,0,2,0

div.box:hover → 0,0,2,1

style="color:red" → 1,0,0,0 (overrides everything else)

3. !important – The Nuclear Option

.box { color: red !important; }

!important

bypasses the weight comparison and forces the rule to win, but it comes with serious costs:

Later overrides require another !important.

Projects that accumulate many !important become unmaintainable.

Teams quickly fall into a “nuclear war” of competing !important declarations.

The only reasonable use case is to override third‑party inline styles; otherwise, prefer a more specific selector.

4. Inheritance – The Forgotten Specificity

Some properties automatically inherit from parent elements (e.g., color, font‑*, text‑*, line-height, letter-spacing). Inherited rules have the lowest weight, even lower than the browser’s User Agent stylesheet.

<div style="color: red">
  <p>This text is red (inherited from div)</p>
</div>

Properties such as border, padding, margin, width, height, and background do not inherit and must be set explicitly.

<div style="border: 1px solid red">
  <p>Child does not inherit the border</p>
</div>

To force inheritance or reset a property you can use:

/* Force inheritance */
.child { border: inherit; }

/* Reset to initial value */
.child { border: initial; }

/* Revert to User Agent default */
.child { border: revert; }

5. Same Weight – Later Wins

.box { color: red; }
.box { color: blue; } /* final color is blue */

This explains why custom styles must be loaded after a UI library; otherwise they are overridden.

<link rel="stylesheet" href="element.css">
<link rel="stylesheet" href="my.css"> <!-- load later to win -->

6. Managing Priority with @layer

Starting with CSS Cascading and Inheritance Level 4, @layer lets you declare explicit style layers independent of file order.

/* Define three layers: reset → component → theme */
@layer reset, component, theme;

@layer reset {
  * { margin: 0; padding: 0; }
}

@layer component {
  .btn { padding: 8px 16px; }
}

@layer theme {
  .btn { background: blue; }
}

Layers defined later have higher priority. Even if the theme block appears first in the file, it still wins because the declaration order (rightmost) is higher.

For UI‑library conflicts, place the library in a lib layer and your custom styles in a custom layer; the custom layer will always win regardless of import order.

@layer lib, custom;

@layer lib {
  .btn { padding: 8px 16px; background: gray; }
}

@layer custom {
  .btn { background: blue; }
}

Anonymous Layers

@layer {
  .box { color: red; }
}
.box { color: blue; } /* wins because it is outside any layer */

Nested Layers

@layer component {
  @layer button {
    .btn { padding: 8px; }
  }
  @layer input {
    .input { padding: 4px; }
  }
}

/* Access nested layer */
@layer component.button {
  .btn { border-radius: 4px; }
}

7. Three Iron Rules for Real‑World CSS

1. Prefer classes over IDs

IDs have high weight; once used, overriding them usually requires another ID or !important.

/* Not recommended */
#header .nav { ... }

/* Recommended */
.header .nav { ... }

2. Keep nesting shallow

/* Bad – weight 0,0,4,0 */
.page .content .list .item { ... }

/* Good – flatter, BEM style */
.list-item { ... }

Deep nesting raises specificity and harms rendering performance.

3. Use :where() and :is() to control weight

:where()

always contributes zero weight, making it safe for library base styles.

:where(.btn) { padding: 8px 16px; }
.btn { background: blue; }

:is()

takes the highest weight among its arguments.

:is(.primary, #special) { padding: 8px 16px; }
.btn { background: blue; } /* does not win against #special */

8. Five‑Step Debugging Checklist

Open DevTools → Styles panel – crossed‑out rules are overridden; identify the winner.

Check selector syntax – typos, missing spaces, case‑sensitivity.

Inspect specificity – see if an ID or !important is dominating; gray entries may be User Agent defaults.

Check order – with equal weight, later rules win.

Consider inheritance – color inherits, border does not; verify default behavior.

9. Common Pitfalls

Mixing commas, spaces, and > changes meaning dramatically; beginners often confuse .parent.child (same element) with .parent .child (descendant) or .parent > .child (direct child).

10. Full Cascade Order (High → Low)

Inline style attribute [1,0,0,0] !important declarations [highest]

Author‑defined @layer (later layers win)

ID selector [0,1,0,0]

Class/attribute/pseudo‑class [0,0,1,0]

Element/pseudo‑element [0,0,0,1]

Inherited styles [lowest]

User Agent default stylesheet [baseline]

11. Quick Recap

Specificity hierarchy: inline > ID > class > element.

Equal weight → later rule wins; rules outside any @layer outrank layered rules. !important is a nuclear option; use only to override third‑party inline styles.

Inheritance has the lowest weight; color inherits, border does not.

Prefer classes, avoid deep nesting, and use :where() to zero weight or :is() to preserve needed weight.

Large projects should manage priority with @layer to reduce order dependence.

When a rule doesn’t apply, inspect DevTools; gray entries are usually User Agent defaults.

Remember: Selectors are “weights”; you should aim to hit the target with the lightest weight possible, not pile on heavy weights.