Hoe bepalen cascade en inheritance welke stijlen van toepassing zijn?

Question

Accepted Answer

Als meerdere regels een element kunnen opmaken, bepalen twee mechanismen het resultaat: de **cascade** (welke regel wint) en **inheritance** (welke eigenschappen van ouders naar kinderen doorgegeven worden).

## The cascade — conflicten oplossen, op volgorde

De browser kiest de winnende declaratie door in prioriteitvolgorde te controleren:

```text
1. Importance   → !important beats normal declarations
2. Specificity  → more specific selector wins (ids > classes > elements)
3. Source order → if still tied, the LAST rule defined wins
```

```css
p { color: blue; }          /* specificity 0,0,1 */
.text { color: green; }     /* specificity 0,1,0 → wins over the element rule */
p { color: red; }           /* same specificity as first, but LATER → would beat blue */
/* result for <p class="text">: green (class beats element) */
```

## Inheritance — sommige eigenschappen gaan naar kinderen

Bestande eigenschappen (vooral **text-gerelateerde**) worden automatisch door nakomelingen overgeërfd; de meeste niet.

```css
body {
  color: #333;        /* ✅ inherited — all text descendants get it */
  font-family: serif; /* ✅ inherited */
  border: 1px solid;  /* ❌ NOT inherited — children don't get a border */
}
```

**Standaard overgeërfd**: `color`, `font-*`, `line-height`, `text-align`, `visibility`, `cursor`. **Niet overgeërfd**: `border`, `margin`, `padding`, `background`, `width`, `height`, `display`.

## Inheritance expliciet beheren

```css
.child {
  color: inherit;  /* force-take the parent's value */
  border: initial; /* reset to the property's default */
  all: unset;      /* reset everything: inherit if inheritable, else initial */
}
```

## Specificity overzicht binnen de cascade

Dit is waarom een laag-specificiteit regel kan verliezen, zelfs als deze later is geschreven — specificiteit wordt *voor* bronvolgorde gecontroleerd. Als u de volgorde begrijpt (importance → specificity → source order), wordt bijna elk "mijn stijl wordt niet toegepast" geval verklaard.

## Waarom het belangrijk is

De cascade en inheritance zijn het kernmodel van *hoe CSS werkelijk wordt opgelost*.

Bij het kennen van de vorangorde debuggt u conflicten, bij het weten welke eigenschappen overerven kunt u `color`/`font` eenmaal op `body` instellen in plaats van overal, en `inherit`/`initial`/`unset` geven u precieze controle — samen maken ze CSS voorspelbaar in plaats van magisch.