2021-09-16

CSS: 子孫セレクタの書き方

CSSのセレクタの中でも使用頻度の高いセレクタの1つに 「子孫セレクタ」があります。 「子孫セレクタ」は起点となる要素の子要素や孫要素を指定するための セレクタです。
ここでは「子孫セレクタ」の書き方を紹介します。

「子孫セレクタ」の書き方

次のように、要素と要素の間を半角スペースで区切ります。

article div {
	.....
}

上の場合は、article要素の中のdiv要素を指定しています。 子孫セレクタですから、子要素のdivだけでなく孫要素のdivも含みます。

article div p {
	.....
}

上の場合は、article要素の中のdiv要素の中のp要素を指定しています。

子孫セレクタはスペースで区切ることでいくつでも繋げますが、 あまり階層を深くし過ぎるとわかりにくくなります。 通常使われるのは2階層や3階層程度です。

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

子孫セレクタは子要素だけでなく、孫要素も含みますが、 場合にようっては「子セレクタ」限定で指定したい場合もあります。

「子セレクタ」は次のように要素と要素の間に「>」を入れて 次のように記述します。

article > div {
	.....
}

上の場合はarticle要素の子要素のdiv要素だけを指定しています。 孫要素にdiv要素があっても適用されません。