Apa cara CSS specificity dihitung?

Question

Accepted Answer

Nalika akeh aturan nuding unsur sing sama, **specificity** mutusake aturan mana sing menang. Iki skor sing dihitung saka bagean selector, dibandingno minangka tupel `(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)
```

Bandingno saka kiwa nganti tengen; kolom pisanan sing beda mutusake pemenang.

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

- Siji **id** iku luwih kuwat tinimbang akeh **kelas**; siji kelas iku luwih kuwat tinimbang akeh unsur. (Sampeyan ora bisa "nambah" tingkat ngisor kanggo ngalahake tingkat sing luwih dhuwur.)
- Yen specificity **padha**, aturan sing muncul **sabanjure** ing sumber menang (urutan sumber).
- **`!important`** nglangkahi specificity normal sakabèh — langkah terakhir sing angel digatasi (sampeyan butuh `!important` liyane karo specificity sing luwih dhuwur).

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

## Ngapa iki penting

Kabèh rasa kesel "kenapa CSS ku ora diterapake?" iku konflik specificity — aturan sing luwih spesifik ing papan liya sing menang.

Ngreksa selector tetep murah lan mendatar (pilih kelas tunggal, iwas id lan `!important`) nggawe specificity bisa diprediksi, supaya gaya tetep gampang digatasi lan dirawat.