CSSの特異性はどのように計算されますか？

Question

Accepted Answer

複数のルールが同じ要素をターゲットにしている場合、**特異性**がどのルールが勝つかを決定します。セレクターの部分から計算されたスコアで、`(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)
```

左から右に比較します。最初に異なる列が勝者を決定します。

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

## 重要なルール

- 1つの**id**は任意の数の**クラス**に勝ります。1つのクラスは任意の数の要素に勝ります。(低いレベルを「足し合わせて」高いレベルに勝つことはできません。)
- 特異性が**同じ**場合、ソースで**後に現れる**ルールが勝ちます(ソース順)。
- **`!important`**は通常の特異性を完全に無視します — 最後の手段で、オーバーライドが難しいものです(より高い特異性を持つ別の`!important`が必要です)。

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

## 実用的なガイダンス

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

## なぜ重要なのか

「CSSが適用されないのはなぜ?」という不満のほとんどは特異性の競合です — より具体的なルールが他の場所で勝っています。

セレクターを低く平らに保つ(単一クラスを優先し、idと`!important`を避ける)ことで、特異性を予測可能に保つため、スタイルは簡単にオーバーライドして保守できます。