CSS子セレクター (A > B) — 直接の子のみ
直接の子要素のみをターゲットするCSS子コンビネータ(>)を学びます。子孫セレクターとの比較と詳細度を理解します。
Combinators
詳細な説明
CSS子セレクター
子コンビネータ（>）は、指定された親の直接の子である要素を選択します。子孫コンビネータとは異なり、1レベルより深くネストされた要素にはマッチしません。
構文
/* .menuの直接の<li>子のみを選択 */
.menu > li {
display: inline-block;
}
直接の子とすべての子孫
<ul class="menu">
<li>Item 1</li> <!-- .menu > li にマッチ -->
<li>
Item 2
<ul>
<li>Sub-item</li> <!-- .menu > li にはマッチしない -->
</ul>
</li>
</ul>
子セレクターを使用する理由
- スタイルの漏れ防止 — トップレベルのアイテム用のスタイルがネストされたアイテムに影響しない
- より予測可能な動作 — どの要素が影響を受けるか推論しやすい
- コンポーネントの分離 — コンポーネントベースのアーキテクチャで重要
ユースケース
子セレクターは、トップレベルのアイテムとネストされたドロップダウンアイテムで異なるスタイリングが必要な多段階ナビゲーションメニューに不可欠です。コンポーネントライブラリでの意図しないスタイルの継承を防ぎ、レイアウトグリッドアイテムが直接の子にのみ適用されることを保証します。