Webサイトを構築する際、HTMLで骨組みを作り、CSSで装飾を施すのはデザイナーにとっての基本です。しかし、CSSを記述する際に「どの要素に対してスタイルを当てるか」を指定する「セレクタ」の理解が浅いと、コードが冗長になり、メンテナンス性が著しく低下します。
今回は、シニアWebデザイナーの視点から、現場で頻繁に使うものから、知っておくと重宝する高度なものまで、25種類のCSSセレクタを体系的に解説します。これらをマスターすれば、あなたのコードはより短く、より堅牢になるはずです。
1. 基本セレクタ（まずはここから）
まずは、すべてのWebサイトで必ず使う基礎中の基礎です。
・全称セレクタ (*)
すべての要素にスタイルを適用します。リセットCSSなどで`* { margin: 0; padding: 0; }`と使うのが一般的です。
・タイプセレクタ (要素名)
`div`や`p`、`h1`のように、タグ名を指定します。特定のタグすべてに共通のデザインを当てる際に用います。
・クラスセレクタ (.)
最も頻繁に使います。`.btn`のように指定し、再利用可能なスタイルを定義するのに最適です。
・IDセレクタ (#)
`#header`のように使用します。ページ内で一意の要素に対して適用しますが、詳細度が高すぎるため、最近の設計ではクラスセレクタの使用が推奨されます。
・グループセレクタ (,)
`h1, h2, h3 { color: #333; }`のようにカンマで区切ることで、複数のセレクタに同じスタイルをまとめて適用します。コードの重複を避ける基本テクニックです。
2. 階層・関係性を示すコンビネータ
要素同士の「位置関係」を指定することで、無駄なクラス名を減らすことができます。
・子孫セレクタ (半角スペース)
`.container p`とすると、`.container`の中にあるすべての`p`タグに適用されます。
・子セレクタ (>)
`.container > p`とすると、`.container`の直下にある`p`タグにのみ適用されます。孫要素には影響しません。
・隣接兄弟セレクタ (+)
`h2 + p`とすると、`h2`の直後に来る`p`タグだけを装飾します。見出しの直後のテキストだけインデントを下げたい場合などに有効です。
・一般兄弟セレクタ (~)
`h2 ~ p`とすると、`h2`と同じ階層にある、それ以降のすべての`p`タグに適用されます。
3. 属性セレクタ（柔軟な指定が可能）
HTMLの属性値を条件にしてスタイルを当てる、非常に強力なセレクタ群です。
・属性存在セレクタ ([attr])
`[target]`とすると、target属性を持つ要素すべてに適用されます。
・属性値一致セレクタ ([attr=”val”])
`input[type=”text”]`など、特定の属性値を持つ要素を絞り込めます。
・属性値前方一致セレクタ ([attr^=”val”])
`a[href^=”https”]`など、URLがhttpsで始まるリンクにアイコンを付ける際などに重宝します。
・属性値後方一致セレクタ ([attr$=”val”])
`a[href$=”.pdf”]`で、PDFファイルのリンクだけを判別できます。
・属性値部分一致セレクタ ([attr*=”val”])
`[class*=”col-“]`のように、特定の文字列を含むクラス名を持つ要素をすべて選択できます。
4. 擬似クラス（状態や順序を制御）
ユーザーのインタラクションや、DOMの構造に基づいたスタイル指定です。
・:hover
マウスカーソルが乗った時のスタイル。UIのフィードバックに必須です。
・:focus
フォーム入力時やキーボード操作時にフォーカスが当たった状態を指定します。アクセシビリティ向上のために必須です。
・:nth-child(n)
`li:nth-child(2)`で2番目の要素を指定します。偶数・奇数の色分け（ストライプテーブル）などにも使われます。
・:first-child / :last-child
最初や最後の要素のみにスタイルを適用します。リストの最後のボーダーを消す際などに便利です。
・:not(selector)
`li:not(.active)`のように、「特定の条件以外」を指定する際に非常に強力です。
・:checked
チェックボックスやラジオボタンがオンになっている状態を指定します。CSSだけでタブ切り替えなどを実装する際にも使われます。
・:empty
中身が空の要素を指定します。不要な余白を消す際に役立ちます。
5. 擬似要素（コンテンツの装飾）
HTMLには存在しない「仮想的な要素」をCSSで生成します。
・::before / ::after
要素の前後にコンテンツを追加します。アイコンの装飾や、clearfixの実装など、現代のCSS開発において欠かせない存在です。
・::first-line / ::first-letter
テキストの最初の行や最初の文字だけを強調する際に使用します。タイポグラフィにこだわりたい場合に有効です。
現場で意識すべき「CSS設計のコツ」
これらのセレクタを使いこなす上で、最も重要なのは「詳細度（Specificity）」の管理です。詳細度が高すぎるセレクタ（IDやネストが深すぎるもの）を多用すると、後からスタイルを上書きするのが困難になります。
1. **クラスベースの設計**: 基本はクラスセレクタを使い、必要に応じてコンビネータで絞り込む。
2. **詳細度を上げすぎない**: `div.wrapper > ul > li > a`のような長い指定は避け、`.nav-link`のように単一のクラスで指定できるようにする。
3. **擬似要素を活用する**: HTMLを汚さずに装飾を追加することで、マークアップをクリーンに保つ。
セレクタは単なる「指定の道具」ではなく、コードの保守性とパフォーマンスを左右する「設計の基盤」です。今回紹介した25種類を組み合わせ、よりスマートで効率的なWebサイト制作を目指してください。
CSSは奥が深いですが、セレクタの引き出しを増やすことで、デザインの表現力は格段に上がります。ぜひ、次のプロジェクトで積極的に活用してみてください。
コメント