【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 要素の下に span 要素があり、その下に strong 要素があります。 つまり、p 要素からみると、strong 要素は孫要素にあたります。


<p>hello <span><strong>world</strong></span></p>

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


p strong {
    color: red;
}

HTML・CSS入門