Bagaimana spesifisitas CSS dihitung?

Question

Accepted Answer

Ketika beberapa aturan menargetkan elemen yang sama, **spesifisitas** menentukan mana yang menang. Ini adalah skor yang dihitung dari bagian-bagian pemilih, dibandingkan sebagai 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)
```

Bandingkan dari kiri ke kanan; kolom pertama yang berbeda menentukan pemenangnya.

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

## Aturan kunci

- Satu **id** mengalahkan sejumlah **kelas** apa pun; satu kelas mengalahkan sejumlah elemen apa pun. (Anda tidak dapat "menjumlahkan" tingkat yang lebih rendah untuk mengalahkan yang lebih tinggi.)
- Jika spesifisitas **sama**, aturan yang muncul **lebih lambat** di sumber menang (urutan sumber).
- **`!important`** sepenuhnya menimpa spesifisitas normal — upaya terakhir yang sulit ditimpa (Anda memerlukan `!important` lain dengan spesifisitas lebih tinggi).

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

## Panduan praktis

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

## Mengapa ini penting

Sebagian besar frustrasi "mengapa CSS saya tidak diterapkan?" adalah konflik spesifisitas — aturan yang lebih spesifik di tempat lain sedang menang.

Menjaga pemilih tetap rendah dan datar (lebih suka kelas tunggal, hindari ids dan `!important`) membuat spesifisitas dapat diprediksi, sehingga gaya tetap mudah untuk ditimpa dan dirawat.