CSS: すべての子孫要素を指定する場合のセレクタ
CSSのセレクタで、すべての子孫要素を指定したい場合は、 *(アスタリスク)を使ったユニバーサルセレクタを使用します。
全ての要素を指定する場合は、*(アスタリスク)のみを使って次のように記述します。
* {
color: red;
}
div 要素の全ての子孫要素を指定する場合は次のように記述します。
div * {
color: red;
}
div 要素のすべての子孫要素を指定するサンプル
次のHTMLは、div 要素の中に span 要素があり、その中に b 要素があります。 つまり、div が親要素、 span が子要素、b が孫要素の関係です。
CSSではユニバーサルセレクタを使って、div 要素のすべての子孫要素に対して 文字色を赤に変更します。
<div class="sample1">「ここは親要素」
<span>「ここは子要素」
<b>「ここは孫要素」</b>
</span>
</div>
<style>
div.sample1 * {
color: red;
}
</style>
表示結果:子要素と孫要素の文字色が赤になっています。 孫要素のb要素は太字で表示されています。
「ここは親要素」「ここは子要素」「ここは孫要素」