SassなどのCSSプリプロセッサのように、CSSでもネストが使用可能になった。
CSSのネストはChrome 112, Edge 112から利用でき、Safariも16.5から、Firefoxも117からサポートされている。（2024/3/12現在）
【参考】
https://coliss.com/articles/build-websites/operation/css/css-nesting.html
【ブラウザのサポート状況】
https://caniuse.com/css-nesting
CSSネストの記述方法がより簡単に
朗報！ これでCSSネストの記述方法がより簡単になります
...
coliss.com
CSSのネストは、2023年3月にリリースされたChrome 112でサポートされ、現在では主要な各ブラウザでサポートされている。
Chrome 120ではCSSネストがより分かりやすい構文もサポートされ、記述方法が簡単になる。
CSSでネストを使用できる前は、すべてのセレクタを互いに個別に明示的に宣言する必要があった。これにより繰り返しが多くなってしまい、スタイルシートがかさばり、オーサリングのエクスペリエンスが散漫だった。
ネストを使用できる後は、セレクタを継続し、それに関連するスタイルルールをグループ化することができる。
CSSネストの構文で最初のリリースにおける制限の1つは、HTMLの要素タグ名をネストできないことだった。最初のリリース時には、要素タグをネストするときには、前に & 記号を加えるか :is() で内包する必要があったが、下記のようにHTMLの要素タグを直接ネストできるようになる。
& 記号なしでも有効になった仕様は、順序付きリスト・順序なしリスト・定義リストを入れ子にするときに直感的で非常に便利である。
.card {
h1 {
/* 現在（Chrome 120）は & 記号なしでも、有効になる */
}
}
.card {
& h1 {
/* リリース時（Chrome 112）の仕様 */
}
}
dl {
dt {
/* dl dtのスタイル */
}
dd {
/* dl ddのスタイル */
}
}CSSのネストを利用してif～else文を実現する
CSSだけでif～else文と同じことができる！ しかもすべてのブラウザでサポートされています
...
coliss.com
CSSでif～else文を実現するには、CSSのネストを使用する。
complex-selector {
/* if-styles */
:not(&) {
/* else-styles */
}
}