CSSの入れ子を使ってみる

CSSのネストでの記述を試してみます。

対応ブラウザ

対応ブラウザはこちら
chromeとedgeはバージョン112から、Safariはバージョン16.5から対応していますが、「div」や「img」のような要素型セレクターの入れ子に対応しておらず、「&」を使った入れ子やクラス名を使った入れ子などにしないといけないようです。
この問題はchromeとedgeはバージョン120(2023年11月29日〜)、Safariはバージョン17.2(2023年12月11日〜)以降では対応しているようですが、記事作成時点で数ヶ月前に対応したばかりなので、使用する際はしばらくは注意が必要そうです。

サンプルコード

以下の例で入れ子のCSS設定を試してみます。

<div class="parent">
	.parent
	<div class="child">
		.child
		<div class="grandchild">.grandchild</div>
	</div>
</div>

クラス名を使った入れ子と合わせて、要素型セレクターを使った入れ子も試してみます。

.parent {
	background: skyblue;
	.child {
		background: purple;
		.grandchild {
			background: tomato;
		}
	}
	div {
		color: white;
	}
}

入れ子でCSSを設定するデモページ

Chrome 121で確認したところ、以下のように意図した通りの表示になりました。

Safariのバージョンが17.2未満だったので同じく確認したところ、クラス名での入れ子で指定した背景色は適用されていましたが、要素型セレクターで指定した文字色は適用されていませんでした。

次に上記サンプルを「&」を使った入れ子に変更してみます。

.parent {
	background: skyblue;
	& .child {
		background: purple;
		& .grandchild {
			background: tomato;
		}
	}
	& div {
		color: white;
	}
}

この場合はSafariのバージョン17.2未満での確認でも文字色の変更が適用されていて、意図した通りの表示になりました。
入れ子でCSSを設定するデモページ2

擬似クラスや疑似要素の設定にも使用できます。

.parent {
	background: skyblue;
	& .child {
		background: purple;
		&::before {
			content: '(before)';
		}
		&:hover {
			background: lime;
		}
		& .grandchild {
			background: tomato;
		}
	}
	& div {
		color: white;
	}
}

入れ子でCSSを設定するデモページ3

@mediaなどアットルールを使った入れ子も設定できます。

.parent {
	background: skyblue;
	@media screen and (min-width: 768px), print {
		background: gold;
	}
	& .child {
		background: purple;
		& .grandchild {
			background: tomato;
		}
	}
	& div {
		color: white;
	}
}

入れ子でCSSを設定するデモページ4

注意点として、BEMなどをSassで記述する際、以下のように1つのクラス名を分割して「&」で連結する書き方がありますが、この書き方はCSSの入れ子ではできません。

<div class="box">
	.box
	<div class="box__child">.box__child</div>
</div>

.box {
	background: skyblue;
	&__child {
		background: purple;
	}
}

入れ子でCSSを設定するデモページ5