Google Chromeの実験的な機能として、CSSのネストが実装されたらしいということで、仕様を読みながら実際にその挙動を確認してみようと思います。

❌本記事で紹介する「CSS Nesting Module」の仕様は現時点（2022/11/25）でFirst Public Working Draft（2022/8/31公開）であり、今後仕様が変更される可能性があります。

⚠実験的な Web プラットフォームの機能
本記事の内容を確認するためにはchrome://flags/にアクセスして、Experimental Web Platform featuresをEnabledにする必要があります。

現状の対応ブラウザ：https://caniuse.com/css-nesting

CSS Nesting Module

CSS Nesting ModuleはネイティブCSSでネスト（入れ子）を導入するための仕様です。
CSSでネストを使うためには、今までSassやLess、StylusなどのCSSプリプロセッサを導入する必要がありました。CSS Nesting Moduleがブラウザに実装されると以下のようなコードをネイティブのCSSで実現できます。

…


全文はこちら：CSS Nestingを試してみる
著者：@yuki-endo