実は素のCSSでもネストできる ー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と同じだから使いやすいですね

SASSとの違い

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

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

CSS
.link { &_list { color: red; }
}
えんどう
えんどう

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


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