Hvordan avgjør cascade og inheritance hvilke stiler som gjelder?

Question

Accepted Answer

Når flere regler kan style et element, bestemmer to mekanismer resultatet: **cascade** (hvilken regel vinner) og **inheritance** (hvilke egenskaper som overføres fra foreldre til barn).

## Cascade — løse konflikter, etter rekkefølge

Nettleseren velger den vinnende deklareringen ved å sjekke, i prioriteringsrekkefølge:

```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 — noen egenskaper overføres til barn

Visse egenskaper (hovedsakelig **tekstrelaterte**) arves automatisk av descendanter; de fleste gjør det ikke.

```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 */
}
```

**Arvet** som standard: `color`, `font-*`, `line-height`, `text-align`, `visibility`, `cursor`. **Ikke arvet**: `border`, `margin`, `padding`, `background`, `width`, `height`, `display`.

## Kontroller inheritance eksplisitt

```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 */
}
```

## Spesifisitet oppsummering innenfor cascaden

Dette er grunnen til at en regel med lav spesifisitet kan tape selv om den er skrevet senere — spesifisitet blir sjekket *før* kildeorden. Å forstå rekkefølgen (importance → specificity → source order) forklarer nesten alle "min stil blir ikke brukt" tilfeller.

## Hvorfor det er viktig

Cascade og inheritance er kjernmodellen for *hvordan CSS faktisk løses*.

Å kjenne prioriteringsrekkefølgen debugger konflikter, å vite hvilke egenskaper som arves lar deg sette `color`/`font` en gang på `body` i stedet for overalt, og `inherit`/`initial`/`unset` gir deg presis kontroll — sammen gjør de CSS forutsigbar i stedet for magi.