CSS IDセレクター (#id) - 使うべき場面と避けるべき場面

CSS IDセレクター

IDセレクターは、一致するid属性を持つ単一の要素をターゲットにします。IDはドキュメント内で一意でなければならないため、IDセレクターは常に最大1つの要素にマッチします。

構文

#header {
  background: #333;
  color: white;
}

詳細度

IDセレクターの詳細度は**(1, 0, 0)**で、クラスセレクターよりも大幅に高くなります。単一のIDセレクターは任意の数のクラスをオーバーライドします：

/* 詳細度: (1, 0, 0) — 勝つ */
#nav { color: red; }

/* 詳細度: (0, 3, 0) — #nav に負ける */
.main .sidebar .nav { color: blue; }

この高い詳細度が、多くのCSS手法がスタイリングにIDセレクターの使用を推奨しない理由です。

スタイリングにおけるID vs クラス

特徴	ID (#id)	クラス (.class)
一意性	ページごとに一意	再利用可能
詳細度	(1, 0, 0)	(0, 1, 0)
JavaScript	getElementById()	querySelectorAll()
再利用性	再利用不可	完全に再利用可能

IDが適切な場合

• フラグメント識別子 — アンカーリンク（#section-1）
• JavaScriptフック — getElementById()は最速のDOMクエリ
• ARIA関係 — aria-labelledby、aria-describedby
• フォームラベル — <label for="email">

ID詳細度のオーバーライド

IDベースのスタイルをオーバーライドする必要がある場合、いくつかのオプションがあります：

/* 別のIDで詳細度を合わせる */
#content #nav { color: blue; }

/* !importantを使用（非推奨） */
.nav { color: blue !important; }

/* :where()で詳細度をゼロにする */
:where(#nav) { color: blue; }  /* 詳細度: (0,0,0) */