【子セレクタ】子要素にスタイルを適用する

子セレクタ(E > F)では、親要素の直接の子要素に対してスタイルを適用することができます。 例えばp > strong{}と指定した場合であれば、p要素の直接の子要素であるstrong要素に対してのみスタイルが適用されます。

※上記だけではわかりづらいので、詳しくは下記の使用例を参照して下さい。

このように子セレクタでは、シンプルセレクタを大なり「>」で区切る事で、前のシンプルセレクタの直接の子要素である後のシンプルセレクタに対してのみスタイルを適用することができます。

また大なり「>」の前後には半角スペースは入れても、入れなくても問題ありません。 ですが、見やすくするために前後に半角スペースを入れる事が多いようです。

なお子セレクタはInternet Explorer6には対応していませんので注意して下さい。

書式

  • セレクタ > セレクタ {プロパティ名:値;} ……… 直接の子要素にスタイルを適用する

使用した時の例

.sample > p {color: red;}
<div class="sample">
<p>サンプルテキスト</p>  
   <div class="example22">
   <p>サンプルテキスト</p>
   </div>
<p>サンプルテキスト</p>
</div>

ブラウザ上の表示例

サンプルテキスト

サンプルテキスト

サンプルテキスト

解説 : 上記の場合div class="example22"内のp要素はdiv class="sample"の孫となるため適用されません。このように子セレクタは、直接の子要素のみに対して適用されます。

対応ブラウザなどのデータ

適用対象 親要素の直接の子要素
対応ブラウザ Internet Explorer7 , Google Chrome , Firefox , Opera , Safari

関連情報