Sassなしで入れ子が可能に。CSSネストがブラウザにやってきた
（2023/01/26）
Safari Technology Preview 162でもネストに対応したので記事を更新しました。
先日リリースされたGoogle Chrome Canaryで、CSSでネスト（入れ子）ができるようになりました💐
2023/01/26には、Safari Technology Preview 162でもネストに対応しました💐
次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。
.container {
.child {
color: red;
}
}
▼ ブラウザの実行結果（Google Chrome Canary）
▼ ブラウザの実行結果（Safari Technology Preview 162）
機能はほぼ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 要素の文字色を赤色にしたい場合、次のようにしてもスタイルが当たりません。
▼ ネストがうまくいかない例
section {
h1 {
color: red;
}
}
h1やpといった要素名のセレクターの場合は、&を使う必要があります。
▼ CSSのネスト記法👩🎨
section {
& h1 {
color: red;
}
}
複数の親セレクターに対してネストはできるか？
可能です。
次のような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被害者救済法という法律で禁止されました。
CSSネストをブラウザで確認するには？
CSSネストの対応ブラウザは、現状Google Chrome Canaryのフラグつきのみです。
Canaryのフラグを有効にするには、chrome://flags/ にアクセスし、「Experimental Web Platform features」を「Enabled」に設定します。
デモのURL
各動作が確認できるURLは次のとおりです。Chrome Canary、もしくはSafari Technology Preview 162でご確認ください。
https://codepen.io/tonkotsuboy/pen/ExRbPgV
▼ Chrome Canaryでの実行結果
今すぐCSSネストを使うには？
全ブラウザの対応はまだ先ですが、現状でも使いたければPostCSSのプラグインを使いましょう。
最後に
CSSネストができるようになると、CSSのコーディングがラクになります。使い方もSassと似ているので、学習コストも低いでしょう。
CSSネストを使いこなし、見通しがよく便利なコーディングをしましょう。
Discussion