CSSセレクターの種類と使い方 — クラス・擬似クラス・結合子の完全ガイド
CSSセレクターはスタイルを適用する要素を指定する記法です。基本的なクラス・IDセレクターから、:not()・:nth-child()などの擬似クラス、属性セレクター、結合子まで多様な種類があります。CSS Selector Testerで実際のHTMLに対してセレクターをテストし、意図通りに効いているか確認しましょう。
基本セレクター：クラス・ID・要素
.classはクラス属性でマッチ、#idはID属性でマッチ、要素名（p/div/a）はそのタグ全てにマッチします。複数のクラスを組み合わせる.class1.class2（スペースなし）はどちらのクラスも持つ要素のみにマッチします。コンマ区切り（.a, .b）でいずれかにマッチするセレクターリストを書けます。
擬似クラス：:nth-child・:not・:hover
:nth-child(n)は親要素内でn番目の子要素を選択します。:nth-child(2n)で偶数番目、:nth-child(odd)で奇数番目を選択できます。:not(.class)は指定クラスを持たない要素を選択し、除外フィルタに使えます。これらをCSS Selector Testerで試すと直感的に動作が理解できます。
結合子：子孫・子・隣接・兄弟
スペースは子孫結合子（.parent .child）で親の中の全子孫にマッチ、>は子結合子で直接の子のみマッチ、+は隣接兄弟結合子で直後の要素のみ、~は兄弟結合子で後続の全兄弟にマッチします。複雑な結合子は意図しないマッチが起きやすく、CSS Selector Testerで確認するのが確実です。
属性セレクターの活用
[attr]はattr属性を持つ要素、[attr="val"]はattrが"val"の要素、[attr^="val"]は"val"で始まる要素、[attr$="val"]は"val"で終わる要素を選択します。input[type="text"]でテキスト入力のみ、a[href^="https"]でHTTPSリンクのみにスタイルを当てるのが代表的な使い方です。