【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>

表示結果:子要素と孫要素の文字色が赤になっています。

「ここは親要素」「ここは子要素」「ここは孫要素」

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト