【CSS】「子セレクタ」で直下の子要素を指定する

スポンサーリンク

CSS のセレクタで、親要素の直接の子要素(直下の子要素)を指定する場合は 「子セレクタ」を使用します。子セレクタは「>」を使って表します。

親要素 > 子要素

例えば、p 要素の直下の strong 要素を指定するには次のように記述します。


p > strong {
    color: red;
}

「子セレクタ」と「子孫セレクタ」の違い

「子セレクタ」は親要素の直接の子要素(直下の子要素)を指定するのに対し、 「子孫セレクタ」は親要素に含まれる子孫要素を指定する場合に使用します。

つまり、直下の子要素だけか、孫要素含むかの違いがあります。

次のようなHTMLコードがあるとします。 p 要素が親要素で、 strong 要素が子要素となります。


<p>hellow <strong>world</strong></p>

p 要素の子要素である strong 要素を指定したい場合は次のように指定できます。


p > strong {
    color: red;
}


次のHTMLコードでは、p 要素の下に b 要素があり、その下に strong 要素があります。 つまり、p 要素からみると、strong 要素は孫要素にあたります。


<p>hello <b><strong>world</strong></b></p>

p 要素の孫要素である strong 要素を指定する場合は 「子孫セレクタ(スペース区切り)」を使って次のように指定できます。


p strong {
    color: red;
}

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト