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