CSSセレクターの組み合わせ — 複合セレクターと複雑なセレクターパターン
CSSセレクターを組み合わせて精密なターゲットルールを作成する方法を学びます。複合セレクター（チェーン）、複雑なセレクター（コンビネータ）、セレクターリスト（カンマ区切り）を紹介します。
Advanced Patterns
詳細な説明
CSSセレクターの組み合わせ
CSSは単純なセレクターを複合パターンや複雑なパターンに組み合わせることで強力になります。効果的な組み合わせ方を理解することが、保守しやすいスタイルシートを書く鍵です。
複合セレクター（チェーン）
スペースなしでセレクターをチェーンして、複数の属性を持つ要素にマッチ：
div.container { }
.btn.primary { }
input.large[required] { }
複雑なセレクター（コンビネータ）
コンビネータを使用して要素間の関係を表現：
.sidebar .widget { } /* 子孫 */
.nav > li { } /* 子 */
h2 + p { } /* 隣接兄弟 */
.toggle:checked ~ .content { } /* 一般兄弟 */
ベストプラクティス
- セレクターをできるだけ短く保つ（最大3-4パーツ）
- 要素でクラスを修飾しない（
ul.navではなく.nav） - セレクターリストを使用して重複を減らす
- 複雑な子孫チェーンよりクラスを優先する
ユースケース
セレクターの組み合わせはすべてのCSS開発者にとって基本的なスキルです。コンポーネントバリアント（.btn.primary vs .btn.secondary）、状態ベースのスタイリング（.input.error:focus）、レイアウトパターン（.grid > .col:nth-child(3n)）、レスポンシブデザインパターンの精密なターゲティングを可能にします。