CSS 子要素選択子
- 前のページ CSS 後代選択子
- 次のページ CSS 相邻兄弟選択子
後裔選択器と比較して、子要素選択器（Child selectors）は、特定の要素の子要素としてのみ選択される要素を選択できます。
子要素を選択
任意の後裔要素を選択するのではなく、範囲を狭めるために特定の要素の子要素のみを選択したい場合は、子要素選択器（Child selector）を使用してください。
例えば、<strong>h1</strong>要素の子要素としてのみ選択したい場合、以下のように記述できます：
h1 > strong {color:red;}
このルールは、最初の<h1>の下にある2つの<strong>要素を赤色にしますが、2つ目の<h1>の<strong>要素には影響しません：
<h1>これは<strong>非常に</strong> <strong>非常に</strong>重要です。</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>
文法説明
すでに気づいたかもしれませんが、子選択子は大于号（子結合子）を使用しています。
子結合子の両側にスペースが含まれることもあります。これは任意です。したがって、以下の記述はすべて問題ありません：
h1 > strong h1> strong h1 >strong h1>strong
右から左に読むと、選択子 h1 > strong は「h1 要素の子としてのすべての strong 要素を選択する」と解釈できます。
後代選択子と子選択子の組み合わせ
以下の選択子を見てください：
table.company td > p
上記の選択子は、table 要素の子としての td 要素を持つすべての p 要素を選択します。この td 要素は table 要素から継承され、table 要素には company という class 属性を持つものがあります。
- 前のページ CSS 後代選択子
- 次のページ CSS 相邻兄弟選択子
