CSSセレクターの種類と使い方 — クラス・擬似クラス・結合子の完全ガイド
CSSセレクターはスタイルを適用する要素を指定する記法です。基本的なクラス・IDセレクターから、:not()・:nth-child()などの擬似クラス、属性セレクター、結合子まで多様な種類があります。CSS Selector Testerで実際のHTMLに対してセレクターをテストし、意図通りに効いているか確認しましょう。
基本セレクター：クラス・ID・要素
.classはクラス属性でマッチ、#idはID属性でマッチ、要素名（p/div/a）はそのタグ全てにマッチします。複数のクラスを組み合わせる.class1.class2（スペースなし）はどちらのクラスも持つ要素のみにマッチします。コンマ区切り（.a, .b）でいずれかにマッチするセレクターリストを書けます。全称セレクター（*）はすべての要素にマッチしますが詳細度は0なので他のセレクターに必ず負けます。IDセレクターは詳細度が高いため使い回しにくく、現代のCSS設計ではクラスベースのセレクターが推奨されます。CSS Selector Testerでは任意のHTML文字列に対してセレクターをリアルタイムでテストし、マッチした要素を即座にハイライト表示できます。
擬似クラス：:nth-child・:not・:hover
:nth-child(n)は親要素内でn番目の子要素を選択します。:nth-child(2n)で偶数番目、:nth-child(odd)で奇数番目、:nth-child(3n+1)で3つおきの要素を選択できます。:not(.class)は指定クラスを持たない要素を選択し、除外フィルタに使えます。:first-child・:last-child・:only-childも頻出の擬似クラスです。:hover・:focus・:active・:visitedはユーザー操作の状態に反応する擬似クラスです。:is()はセレクターリストをまとめて書くのに便利で、:is(h1, h2, h3) { color: red }は3つの見出しに一括適用できます。これらをCSS Selector Testerで試すと直感的に動作が理解できます。
結合子：子孫・子・隣接・兄弟
スペースは子孫結合子（.parent .child）で親の中の全子孫にマッチ、>は子結合子で直接の子のみマッチ、+は隣接兄弟結合子で直後の要素のみ、~は兄弟結合子で後続の全兄弟にマッチします。複雑な結合子は意図しないマッチが起きやすく、CSS Selector Testerで確認するのが確実です。たとえば「input:checked + label」はチェック状態のinputの直後にあるlabelのみにスタイルを当てられ、JavaScriptなしのカスタムチェックボックスUIの実装に使われます。「article > p:first-child」のように子結合子と擬似クラスを組み合わせることで、特定の親の直接の子である最初の段落だけを選択するような精密なスタイル指定が可能です。
属性セレクターの活用
[attr]はattr属性を持つ要素、[attr="val"]はattrが"val"の要素、[attr^="val"]は"val"で始まる要素、[attr$="val"]は"val"で終わる要素、[attr*="val"]は"val"を含む要素を選択します。input[type="text"]でテキスト入力のみ、a[href^="https"]でHTTPSリンクのみ、a[href$=".pdf"]でPDFリンクのみにスタイルを当てるのが代表的な使い方です。[attr~="val"]はスペース区切りの単語として"val"を含む要素を選択し、クラス属性の部分マッチに利用できます。属性セレクターはクラスを付けなくてもHTML標準属性を使って要素を特定できるためマークアップをシンプルに保てます。フォームのバリデーション状態も:validや:invalidの擬似クラスと組み合わせると効果的です。