Hoe wordt CSS-specificiteit berekend?

Question

Accepted Answer

Wanneer meerdere regels hetzelfde element richten, bepaalt **specificiteit** welke wint. Het is een score die is berekend op basis van de onderdelen van de selector, vergeleken als een tuple `(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)
```

Vergelijk van links naar rechts; de eerste kolom die verschilt, bepaalt de winnaar.

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

## Kernregels

- Een enkele **id** weegt zwaarder dan elk aantal **classes**; een enkele class weegt zwaarder dan elk aantal elementen. (Je kunt lagere niveaus niet "optellen" om een hoger niveau te verslaan.)
- Als de specificiteit **gelijk** is, wint de regel die **later** in de bron voorkomt (bronvolgorde).
- **`!important`** overschrijft normale specificiteit volledig — een laatste uitweg die moeilijk te overschrijven is (je zou nog een ander `!important` met hogere specificiteit nodig hebben).

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

## Praktische begeleiding

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

## Waarom het belangrijk is

Meeste "waarom wordt mijn CSS niet toegepast?" frustratie is een specificiteitsconflict — een meer specifieke regel ergens anders wint.

Selectors laag en plat houden (verkies enkele classes, vermijd ids en `!important`) houdt specificiteit voorspelbaar, zodat stijlen gemakkelijk te overschrijven en te onderhouden blijven.