Hur beräknas CSS-specificitet?

Question

Accepted Answer

När flera regler riktar sig till samma element bestämmer **specificitet** vilken som vinner. Det är ett värde beräknat från selektorns delar, jämfört som en tupel `(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)
```

Jämför från vänster till höger; den första kolumn som skiljer sig avgör vinnaren.

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

## Nyckelregler

- Ett enda **id** väger tyngre än vilket antal **klasser** som helst; en klass väger tyngre än vilket antal element som helst. (Du kan inte "addera" lägre nivåer för att slå en högre nivå.)
- Om specificiteten är **lika**, vinner regeln som visas **senare** i källkoden (källkodordning).
- **`!important`** åsidosätter normal specificitet helt och hållet — en sista utväg som är svår att åsidosätta (du skulle behöva en annan `!important` med högre specificitet).

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

## Praktisk vägledning

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

## Varför det spelar roll

De flesta "varför tillämpas inte min CSS?" frustrationer är en specificitetskonflikt — en mer specifik regel någon annanstans vinner.

Att hålla selektorer låga och platta (föredra enstaka klasser, undvik id och `!important`) gör specificiteten förutsägbar, så stilar förblir lätta att åsidosätta och underhålla.