CSS IDセレクター (#id) — ユニークな要素のターゲット
id属性で単一のユニークな要素をターゲットするCSS IDセレクターを理解します。詳細度への影響とIDとクラスの使い分けについて学びます。
Basic Selectors
詳細な説明
CSS IDセレクター
IDセレクターはハッシュ（#）プレフィックスを使用して、ユニークなid属性で要素をターゲットします。IDはドキュメント内で一意でなければならないため、このセレクターは常に最大1つの要素にマッチします。
構文
#header {
/* id="header"の要素に適用されるスタイル */
}
詳細度への影響
IDセレクターの詳細度は**(1, 0, 0)**で、クラスセレクター(0, 1, 0)よりも大幅に高くなります。つまり、IDベースのルールはスタイルシート内の順序に関係なくクラスベースのルールをオーバーライドします。
.nav { color: blue; } /* 詳細度: (0, 1, 0) */
#main-nav { color: red; } /* 詳細度: (1, 0, 0) — 優先 */
IDとクラスの使い分け
| 特徴 | ID | クラス |
|---|---|---|
| 一意性 | ページごとに一意 | 再利用可能 |
| 詳細度 | 高 (1, 0, 0) | 中 (0, 1, 0) |
| JavaScript | getElementById() |
getElementsByClassName() |
| URLアンカー | 可能 (#section) |
不可 |
| スタイリングに推奨 | まれ | はい |
よくある落とし穴
- IDの多用は
!importantなしではスタイルのオーバーライドを困難にする - IDはCSSとHTML構造間の密結合を生み出す
- IDがスタイルシート全体に散在している場合、リファクタリングが困難になる
- 現代のCSS手法（BEM、SMACSS）ではスタイリングにIDセレクターの使用を推奨していない
ユースケース
IDセレクターは主にJavaScriptフック（getElementById）、URLフラグメントナビゲーション（#sectionアンカー）、アクセシビリティランドマーク（aria-labelledby）に使用されます。スタイリングにも使用できますが、IDの高い詳細度のため、ほとんどのCSS手法ではクラスを推奨しています。フォーム要素ではfor属性によるラベル関連付けのためにIDがよく使用されます。