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

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

このように子孫セレクタでは、各シンプルセレクタを半角スペースで区切ると、前のシンプルセレクタに含まれる後のシンプルセレクタに対してのみスタイルを適用させることができます。

また子孫セレクタには個別性がありませんが、複数のセレクタを組み合わせる事で個別性を高める事ができます。

書式

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

使用した時の例

p span {color: red; text-decoration: underline;}
div.sample1 span {font-weight:bold;}
<p>サンプルテキスト<span>ここがspanの部分</span>となります</p>

<div class="sample1">
サンプルテキスト<span>ここがspanの部分</span>となります
</div>

ブラウザ上の表示例

サンプルテキストここがspanの部分となります

サンプルテキストここがspanの部分となります

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

適用対象 親要素に含まれる子孫要素
対応ブラウザ Internet Explorer , Google Chrome , Firefox , Opera , Safari

関連情報