Kuinka CSS-spesifisyys lasketaan?

Question

Accepted Answer

Kun useita sääntöjä kohdistuu samaan elementtiin, **spesifisyys** määrittää, kumpi voittaa. Se on pistemäärä, joka lasketaan selektorin osista, ja se vertaillaan tuplelina `(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)
```

Vertaa vasemmalta oikealle; ensimmäinen sarake, joka eroaa, määrittää voittajan.

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

## Tärkeimmät säännöt

- Yksi **id** voittaa minkä tahansa määrän **luokkia**; yksi luokka voittaa minkä tahansa määrän elementtejä. (Et voi "laskea yhteen" alempia tasoja päihittääksesi korkeammalla tasolla olevaa.)
- Jos spesifisyys on **yhtä suuri**, sääntö, joka esiintyy **myöhemmin** lähdekoodissa, voittaa (lähdekoodi-järjestys).
- **`!important`** ohittaa normaali spesifisyyden kokonaan — viimeinen keino, jota on vaikea ohittaa (tarvitsisit toisen `!important`-määrityksen, jolla on korkeampi spesifisyys).

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

## Käytännön neuvot

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

## Miksi se on tärkeää

Suurin osa "miksi CSS-sääntelyt eivät ota vaikutusta" -turhautumisesta johtuu spesifisyyden konfliktista — spesifiikempi sääntö jossain muualla voittaa.

Selektoreiden pitäminen matalina ja tasaisina (suosi yksittäisiä luokkia, vältä id-tunnisteita ja `!important`-määrityksiä) pitää spesifisyyden ennustettavana, joten tyylit pysyvät helposti ohitettavissa ja ylläpidettävissä.