Hvordan beregnes CSS-spesifisitet?

Question

Accepted Answer

Når flere regler retter seg mot det samme elementet, **spesifisitet** avgjør hvilken som vinner. Det er en poengsum beregnet fra delene av velgeren, sammenlignet som en tuppel `(ids, classes, elements)`.

```text
Inline style   → 1,0,0,0  (highest, short of !important)
ID             → 0,1,0,0
Class / attr / pseudo-class → 0,0,1,0
Element / pseudo-element    → 0,0,0,1
Universal (*)  → 0,0,0,0  (no weight)
```

Sammenlign fra venstre til høyre; den første kolonnen som er forskjellig avgjør vinneren.

```css
#nav .item a   { color: red; }   /* 1 id, 1 class, 1 element → 1,1,1 */
.menu .item a  { color: blue; }  /* 0 id, 2 classes, 1 element → 0,2,1 */
/* red wins — having ONE id beats any number of classes */
```

## Nøkkelregler

- En enkelt **id** veier mer enn et hvilket som helst antall **klasser**; en enkelt klasse veier mer enn et hvilket som helst antall elementer. (Du kan ikke "legge sammen" lavere nivåer for å slå et høyere.)
- Hvis spesifisiteten er **lik**, vinner regelen som vises **senere** i kilden (kildeordning).
- **`!important`** overstyrer normal spesifisitet helt — en siste utvei som er vanskelig å overstyrer (du ville trengt en annen `!important` med høyere spesifisitet).

```css
.btn { color: blue !important; } /* ⚠️ wins over almost everything — avoid */
```

## Praktisk veiledning

```css
/* ❌ over-specific, hard to override later */
#sidebar ul li.active a { }
/* ✅ keep it flat — one class -> easy to manage */
.nav-link--active { }
```

## Hvorfor det er viktig

Det meste av frustrasjonen "hvorfor blir ikke min CSS brukt?" skyldes en spesifisitetkonflikt — en mer spesifikk regel andre steder vinner.

Å holde velgere lave og flate (foretrekk enkeltklasser, unngå ids og `!important`) holder spesifisiteten forutsigbar, slik at stiler forblir enkle å overstyrer og vedlikeholde.