• Chapter 10 — Specificity & Cascade
  • The Core Question
  • Rule 1 — Importance (!important)
  • Rule 2 — Specificity
  • Rule 3 — Order
  • * Selector and Specificity
  • Inheritance
  • Browser Default Styles
  • ::before and ::after — Pseudo-elements
  • Debugging Specificity
  • Best Practices
  • The Complete Cascade Order (Lowest → Highest)

§Chapter 10 — Specificity & Cascade

§The Core Question

What happens when two CSS rules target the same element and say different things?

p { color: blue; }
p { color: red; }

The browser follows three rules in order:

1. Importance   → is one rule marked !important?
2. Specificity  → which selector is more specific?
3. Order        → which rule comes last in the file?

§Rule 1 — Importance (!important)

p { color: blue !important; } /* wins over everything */
p { color: red; }

When to use:

✅ Overriding third-party library styles you can't edit
✅ Utility classes that must always apply (.hidden)
❌ Fixing your own CSS specificity problems
❌ Using it everywhere — causes chaos

§Rule 2 — Specificity

A score with three columns:

┌─────────────────────────────────────────┐
│   IDs   │   Classes   │   Elements      │
│  (100)  │    (10)     │     (1)         │
└─────────────────────────────────────────┘

p               { } /* 0-0-1 */
.card           { } /* 0-1-0 */
.card p         { } /* 0-1-1 */
#header         { } /* 1-0-0 */
#header .nav    { } /* 1-1-0 */

Inline styles → 1000. !important → beats everything.

Columns are compared left to right. 0 IDs, 20 classes (0-20-0) beats 0 IDs, 0 classes, 1000 elements (0-0-1000) because the class column wins first.

§Rule 3 — Order

If specificity is exactly equal, the rule that appears last wins:

p { color: blue; }
p { color: red; } /* same specificity — this wins */

§* Selector and Specificity

The universal selector has zero specificity — loses to everything:

* { color: red; }  /* 0-0-0 */
p { color: blue; } /* 0-0-1 — wins */

§Inheritance

Some CSS properties automatically pass down from parent to children:

Properties that inherit (text-related):

color, font-family, font-size, font-weight, font-style,
line-height, text-align, text-transform, letter-spacing

Properties that do NOT inherit (box-related):

margin, padding, border, width, height, background, display, position

Forcing inheritance:

.child {
  border: inherit;   /* force inheritance */
  color: initial;    /* reset to browser default */
  color: unset;      /* inherit if inheritable, otherwise initial */
}

§Browser Default Styles

Before your CSS runs, the browser applies its own defaults. This is why <h1> is large and bold, <p> has margin, <a> is blue and underlined.

Your CSS overrides these. A CSS reset clears them:

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

§::before and ::after — Pseudo-elements

p::before { content: "→ "; }  /* inserts before content */
p::after  { content: " ✓"; }  /* inserts after content */

Must have a content property (even if empty: content: "").

Common use — decorative line under heading:

h2 { position: relative; padding-bottom: 12px; }

h2::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 60px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}

§Debugging Specificity

When a style isn’t applying:

1. Open browser DevTools (F12 or right-click → Inspect)
2. Click the element
3. Look at the Styles panel
4. Styles with strikethrough are being overridden
5. Check which rule is winning — look at its selector
6. Either make your selector more specific, move your rule
   later, or remove the conflicting rule

§Best Practices

✅ Keep selectors as short as possible
✅ Prefer classes over IDs for styling
✅ Never use IDs for CSS — use them for JS and anchors
✅ Avoid nesting selectors more than 2-3 levels deep
✅ Never use inline styles — hard to override
✅ Reserve !important for utility classes only
✅ Order: resets first, base next, components after, utilities last

§The Complete Cascade Order (Lowest → Highest)

1. Browser default styles
2. External stylesheet rules
3. Internal <style> tag rules
4. Inline style attribute  (style="...")
5. !important on any above  (highest)

Within each level — more specific selector wins.
Within equal specificity — later rule wins.

Tags: #CSS #css #vdsology #webdevelopment #vdsologyCSS #CSS3 #CSSreference #CSSreference2026