Jak se vypočítává specifičnost CSS?

Question

IT Interview Practice · Accepted Answer

Když se více pravidel vztahují na stejný prvek, **specifičnost** rozhoduje o tom, které vyhraje. Jedná se o skóre vypočítané z částí selektoru, porovnávaného jako n-tice `(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)
```

Porovnávejte zleva doprava; první sloupec, který se liší, určuje vítěze.

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

## Klíčová pravidla

- Jedno **id** převáží jakýkoliv počet **tříd**; jedna třída převáží jakýkoliv počet prvků. (Nemůžete "sčítat" nižší úrovně, abyste porazili vyšší úroveň.)
- Pokud je specifičnost **stejná**, vyhraje pravidlo, které se ve zdrojovém kódu **zobrazuje později** (pořadí zdroje).
- **`!important`** zcela potlačuje normální specifičnost — poslední možnost, kterou je těžké potlačit (budete potřebovat další `!important` s vyšší specifičností).

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

## Praktické pokyny

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

## Proč na tom záleží

Většina frustrací "proč se mé CSS nepoužívá?" je konflikt specifičnosti — vyhrává specifičnější pravidlo jinde.

Udržování selektorů nízko a rovně (preferujte jednoduché třídy, vyhýbejte se id a `!important`) udržuje specifičnost předvídatelnou, aby byly styly snadno přepisovatelné a udržovatelné.

Klíčová pravidla

Praktické pokyny

Proč na tom záleží

Související otázky