Hogyan számítható ki a CSS specificitás?

Question

Accepted Answer

Ha több szabály ugyanazt az elemet célozza, a **specificitás** határozza meg, hogy melyik nyer. Ez a selektor részeiből számított pontszám, amely tuple `(ids, classes, elements)` formában kerül összehasonlításra.

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

Hasonlítsa össze balról jobbra; az első eltérő oszlop határozza meg a nyertest.

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

## Alapvető szabályok

- Egy **id** felülmúl tetszőleges számú **osztályt**; egy osztály felülmúl tetszőleges számú elemet. (Nem lehet "összeadni" az alacsonyabb szinteket egy magasabb szint legyőzéséhez.)
- Ha a specificitás **egyenlő**, akkor az a szabály nyer, amely **később** jelenik meg a forráskódban (forrássorrend).
- **`!important`** teljesen felülírja a normális specificitást — egy utolsó menedék, amely nehéz felülírni (egy másik `!important` szükségelne nagyobb specificitással).

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

## Gyakorlati útmutató

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

## Miért fontos ez

A legtöbb "miért nem működik az én CSS?" csalódottság specificitás-konfliktus – egy pontosabb szabály másutt nyer.

A szelektorok alacsony és lapos tartása (az egyetlen osztályok preferálása, az ids és `!important` elkerülése) megtartja a specificitást előreláthatónak, így a stílusok könnyűen felülírhatók és karbantarthatók maradnak.