Sassなしで入れ子が可能に。CSSネストが全ブラウザ対応
（2023/08/29）
全ブラウザでネストに対応したので記事を更新しました。
本日2023/08/29、全ブラウザでCSSでネスト（入れ子）ができるようになりました💐
次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。
.container {
.child {
color: red;
}
}
▼ ブラウザの実行結果（Google Chrome 112）
機能はほぼSassのネストと同じですが、一部に違いがあります。
本記事では、CSSネストの基本から各シーンでのコード例までを、デモを交えて紹介します。
ネストの基本
Sassのネストとほぼ同じです。
次のようなHTMLがあったとしてます。
<div class="container">
<div class="child">
Child
</div>
</div>
.child 要素の文字色を赤色にしたい場合、従来は次のようにしていました。
.container .child {
color: red;
}
CSSのネストに対応したブラウザでは、次のように記述できます。
▼ CSSのネスト記法①👩🎨
.container {
.child {
color: red;
}
}
もしくは、 &を使って次のように記述します。
▼ CSSのネスト記法②👩🎨
.container {
& .child {
color: red;
}
}
h1やpといった要素名のセレクターの場合
次のようなHTMLがあったとしてます。
<section>
<h1>タイトル</h1>
</section>
h1 要素の文字色を赤色にしたい場合、次のようにします。
▼ CSSのネスト記法👩🎨
section {
h1 {
color: red;
}
}
ちなみに、CSS ネストが登場した当初は & を使う必要がありましたが、Chrome 120, Edge 120, Safari 17.2, Firefox 117では & の記法が不要になりました。
複数の親セレクターに対してネストはできるか？
可能です。
次のようなHTMLがあるとします。
<div class="apple">
<p class="text">りんご</p>
</div>
<div class="orange">
<p class="text">みかん</p>
</div>
.apple要素、.orange要素のそれぞれの子要素に.text要素があります。.text要素の文字色を赤色にしたい場合、従来は次のようにしていました。
▼ 従来のCSS
.apple .text,
.orange .text {
color: red;
}
ネストを使えば、次のように記述できます。
▼ CSSのネスト👩🎨
.apple,
.orange {
.text {
color: red;
}
}
一つの親要素から複数の子のCSS指定をネストにできるか？
可能です。
次のようなHTMLがあるとします。
<div class="container">
<div class="child1">子供1</div>
<div class="child2">子供2</div>
</div>
.container要素内に複数の子要素があります。それぞれの子要素の文字色を赤色にしたい場合、従来は次のようにしていました。
▼ 従来のCSS
.container .child1,
.container .child2 {
color: red;
}
ネストを使えば、次のように記述できます。
▼ CSSのネスト👩🎨
.container {
.child1,
.child2 {
color: red;
}
}
&:hover の記法はできるか？
可能です。
次のようなHTMLがあるとします。
<a class="link" href="#">リンク</a>
.link要素で、hover時とactive時に文字色を赤色にしたい場合、従来は次のようにしていました。
▼ 従来のCSS
.link:hover,
.link:active {
color: red;
}
ネストを使えば、次のように記述できます。
▼ CSSのネスト👩🎨
.link {
&:hover,
&:active {
color: red;
}
}
メディアクエリのネストはできるか？
可能です。
次のようなHTMLがあるとします。
<div class="box"></div>
.box要素について、通常の文字色は青色、ウインドウサイズ800px以上のときのみ文字色を赤色にしたい場合、従来は次のようにしていました。
▼ 従来のCSS
.box {
color: blue;
}
@media (min-width: 800px) {
.box {
color: red;
}
}
ネストを使えば、次のように記述できます。
▼ CSSのネスト👩🎨
.box {
color: blue;
@media (min-width: 800px) {
color: red;
}
}
「.box要素についてのメディアクエリを設定したい」と関心事が分離されるので、コードの見通しがよくなって便利ですね。 Sassの経験がある方は、それと同じ挙動であると思えばよいです。
セレクター名の一部を使った &__bar の記法はできるのか？
できません🙅
BEMなどを使っている際、次のような foo__bar というクラス名をHTMLで定義し・・・
<div class="foo__bar"></div>
次のようにSassでスタイルをあてるケースがよくあります。
▼ Sass。CSSのネストではない
.foo {
&__bar {
color: red;
}
}
こういった使い方はCSSネストではできません。
ちなみにこの記法は、ジャンプできない・リファクタリングできない・コード検索が手間という理由により、CSS被害者救済法という法律で禁止されました。
ブラウザ対応状況
2023/08/29にFirefox 117がリリースされたことにより、全ブラウザでネストが使えるようになりました。また、2023/12に、各ブラウザで h1などのネスト時の & 記法が不要になりました。
デモのURL
各動作が確認できるURLは次のとおりです。
https://codepen.io/tonkotsuboy/pen/ExRbPgV
▼ 各ブラウザの実行結果
今すぐCSSネストを使うには？
全ブラウザ対応したといっても、古いブラウザの対応も必要なケースがあるでしょう。
その場合は、PostCSSのプラグインを使いましょう。
最後に
CSSネストができるようになると、CSSのコーディングがラクになります。使い方もSassと似ているので、学習コストも低いでしょう。
CSSネストを使いこなし、見通しがよく便利なコーディングをしましょう。
Discussion