大于号选择器で第一階層の子要素を選択する
この記事では、CSSの `>` セレクタを使用して、特定の要素の**第一階層**の子要素を選択する方法と、` ` (空白) セレクタとの違いについて解説します。
`>` セレクタの使用
`elementA > elementB` は、すべての `elementA` の **直接の子要素** である `elementB` 要素を選択します。
例
以下のHTML構造を考えます。
<ul>
<li>リスト項目 1</li>
<li>リスト項目 2
<ul>
<li>ネストされたリスト項目 1</li>
<li>ネストされたリスト項目 2</li>
</ul>
</li>
<li>リスト項目 3</li>
</ul>
`ul > li` セレクタは、最初のレベルのリスト項目 (リスト項目 1、リスト項目 2、リスト項目 3) のみをターゲットにします。ネストされたリスト項目は選択されません。
| セレクタ | 説明 |
|---|---|
ul > li |
すべての <ul> 要素の直接の子要素である <li> 要素を選択します。ネストされた <li> 要素は選択しません。 |
` ` (空白) セレクタとの比較
` ` (空白) セレクタは、要素間の親子関係を示しますが、階層を問わずすべての子孫要素を選択します。一方、`>` セレクタは直接の子要素のみを選択します。
例
上記のHTML構造を使用すると、`ul li` セレクタは、ネストされたリスト項目を含む**すべて**のリスト項目を選択します。
| セレクタ | 説明 |
|---|---|
ul li |
すべての <ul> 要素の子孫要素である <li> 要素を選択します。 |
まとめ
`>` セレクタを使用すると、要素をより正確に選択し、不要な子要素の選択を防ぐことができます。 特に複雑なHTML構造を扱う場合、この違いは重要になります。
QA
Q1: `>` セレクタは、どのバージョンの CSS からサポートされていますか？
A1: `>` セレクタは、CSS2 からサポートされています。
Q2: `>` セレクタと ` ` (空白) セレクタのどちらを使うべきですか？
A2: 選択したい要素の階層構造によって異なります。直接の子要素のみを選択したい場合は `>` セレクタ、すべての子孫要素を選択したい場合は ` ` (空白) セレクタを使用します。
Q3: `>` セレクタを使用する際に注意すべき点はありますか？
A3: `>` セレクタは、Internet Explorer 6 などの古いブラウザではサポートされていません。古いブラウザをサポートする必要がある場合は、注意が必要です。