CSS özgüllüğü nasıl hesaplanır?

Question

Accepted Answer

Aynı öğeyi hedefleyen birden fazla kural olduğunda, **özgüllük** hangisinin kazandığını belirler. Seçicinin bölümlerinden hesaplanan ve `(ids, classes, elements)` tuple'ı olarak karşılaştırılan bir puandır.

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

Soldan sağa karşılaştır; fark gösteren ilk sütun kazananı belirler.

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

## Temel kurallar

- Tek bir **id** herhangi sayıda **class**'ı yener; tek bir class herhangi sayıda öğeyi yener. (Daha yüksek bir seviyeyi yenmek için alt seviyeleri "toplayamazsınız".)
- Özgüllük **eşit** ise, kaynak kodda **daha sonra** görünen kural kazanır (kaynak sırası).
- **`!important`** normal özgüllüğü tamamen geçersiz kılar — son çare olup, geçersiz kılması zordur (daha yüksek özgüllüğe sahip başka bir `!important` gerekir).

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

## Pratik rehberlik

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

## Neden önemli

Çoğu "CSS stilim neden uygulanmıyor?" hayal kırıklığı bir özgüllük çatışmasıdır — başka bir yerde daha spesifik bir kural kazanıyor.

Seçicileri düşük ve düz tutmak (tek class'ları tercih edin, id'ler ve `!important`'ı kaçının) özgüllüğü tahmin edilebilir tutar, böylece stiller geçersiz kılması ve bakımı kolay kalır.