Kako se izračuna specifičnost CSS-ja?

Question

Accepted Answer

Ko več pravil tarči isti element, **specifičnost** odloči, katero pravilo zmaga. To je rezultat, izračunan iz delov selektorja, primerjanih kot 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)
```

Primerjaj od leve proti desni; prva stolpec, ki se razlikuje, odloči zmagovalca.

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

## Ključna pravila

- En sam **id** premaga katero koli število **razredov**; en razred premaga katero koli število elementov. (Nižjih nivojev ne moreš "seštevati", da premaguješ višjega.)
- Če je specifičnost **enaka**, pravilo, ki se pojavi **kasneje** v izvoru, zmaga (vrstni red izvora).
- **`!important`** v celoti preglasi normalno specifičnost — zadnja možnost, ki jo je težko preglasiti (potreboval bi še en `!important` z višjo specifičnostjo).

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

## Praktični nasveti

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

## Zakaj je to важно

Večina "zakaj se moj CSS ne uporablja?" frustracij je specifičnostni konflikt — bolj specifično pravilo drugje je zmago.

Zadržavanje selektorjev nizkih in ravnih (prefer enojne razrede, izogni se id in `!important`) ohranja specifičnost napovedljivo, zato so slogi enostavni za preglasitev in vzdrževanje.