Sassなしで入れ子が可能に。CSSネストが全ブラウザ対応

SRANK

（2023/08/29）全ブラウザでネストに対応したので記事を更新しました。本日2023/08/29、全ブラウザでCSSでネスト（入れ子）ができるようになりました💐次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。.container { .child { color: red; } } ▼ ブラウザの実行結果（Google Chrome 112）機能はほぼ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; } } h…