Kako se izračunava CSS specifičnost?

Question

Accepted Answer

Kada više pravila ciljaju isti element, **specifičnost** određuje koji pobjeđuje. To je rezultat izračunat iz dijelova selektora, uspoređen kao 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)
```

Usporedite s lijeva na desno; prvi stupac koji se razlikuje određuje pobjednika.

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

- Jedan **id** nadmašuje bilo koji broj **klasa**; jedna klasa nadmašuje bilo koji broj elemenata. (Ne možete "zbrojiti" niže razine kako biste pobijedili višu.)
- Ako je specifičnost **jednaka**, pravilo koje se pojavljuje **kasnije** u izvoru pobjeđuje (redoslijed izvora).
- **`!important`** u potpunosti nadjačava normalnu specifičnost — posljednja mjera koju je teško nadjačati (trebao bi vam drugi `!important` s većom specifičnošću).

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

## Praktični savjeti

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

## Zašto je to važno

Većina "zašto se moj CSS ne primjenjuje?" frustracije je konflikt specifičnosti — specifičnije pravilo negdje drugdje pobjeđuje.

Držanje selektora niskima i ravnima (preferiraju jednostavne klase, izbjegavaju ids i `!important`) čuva specifičnost predvidivom, tako da stilovi ostaju laki za nadjačavanje i održavanje.