子供セレクタ Child selectors

子供セレクタ（Child selectors）

子供セレクタは，ある選択対象の要素が，ある別の要素の子供（直接下位の要素）である時にマッチします。子供セレクタは，閉じ不等号（>）で区切られた2つ以上の単純セレクタから構成されます。

例えばA >B という形式の場合，A要素を直接の親とする任意のB要素にマッチします。ある要素の最初の子供要素を指し示すセレクタについては，:first-child疑似クラスを参照してください。

次例は，body の子供である p の，更にその子供である em にマッチします。

body > p > em { color: red; }

<body> <h1>子供セレクタ</h1> <p>ある選択対象の要素の<em>直接の子供</em>にマッチする。

</p> <div class="note"> <p>選択対象の<em>直接の子供でない</em>場合はマッチしない。

</p> </div> </body>

次例では，子孫セレクタと子供セレクタを組み合わせたセレクタを使用しています。

次例の規則のセレクタは，li要素の子孫であるp要素にマッチするのですが：

div ol > li p { line-height: 1.2; }

li は ol の子供でなければならず，更にその ol は div の子孫でなければなりません。