実は素のCSSでもネストできる　ーCSSネスト構文まとめー

SASSなどのCSSプリプロセッサーでお馴染みのCSSネストですが、実は2023年に素のCSSでも使用できるようになりました。全ての主要ブラウザでサポートされています。

リリース当初は、要素タグを直接ネストできないなどの制限がありましたが、現在ではアップデートされてよりSASSのネストに近い使用感になっています。

2023/3

CSSネストが登場

2023/8

Firefoxがネストに対応　全ての主要ブラウザが基本的なネスト機能に対応

2023/12

先読みネストに対応、要素タグが直接ネストできるようになる

CSSネスト構文の書き方やSASSとの違いを見ていきましょう。

CSSネスト構文

2023年末に要素タグが直接ネストできるようになったため、ほぼSASSと同じ感覚でネストできます。

HTML

<div class="parent"> <div class="child"> sample </div>
</div>

CSS

.parent { .child { color: red; }
}
/*もしくは、このような書き方もできます*/
.parent { & .child { color: red; }
}
/*要素タグも直接いける*/
.parent { div { color: red; }
}

えんどう

2個目の書き方は、SASSのAND条件と紛らわしいですね

CSS

.foo,
.bar { .text { color: red; }
}
/*👇👇👇従来の書き方だとこうなる*/
.foo .text,
.bar .text { color: red;
}

CSS

.parent{ .foo, .bar{ color:blue; }
}
/*👇👇👇従来の書き方だとこうなる*/
.parent .foo,
.parent .bar { color: blue;
}

CSS

.parent{
　　　　　&:hover{
　　　　　　　　　　color:green;
　　　　　　}
}
.parent{
　　　　　&::after{
　　　　　　　　　　position:absolute;
　　　　　　}
}

CSS

.parent{ @media (min-width: 768px) { width:80%; }
}

えんどう

この辺りはSASSと同じだから使いやすいですね

一つのクラス名を&で分割する書き方はCSSではできません。

例えばlink_listというクラスがあったとして、以下のような書き方でスタイルを当てることはできません。

CSS

.link { &_list { color: red; }
}

えんどう

この書き方はクラスの検索ができなくて超絶不便なのでSASSでもやめて欲しいと個人的には思っています。

以上、ネイティブCSSでもネストできるようになったよ！という記事でした。