CSS Nesting（入れ子記法）の構文が更新され、タグで直接ネストできるようになりました🎉
タグのネストの制限
これまでCSS Nestingではタグのネストには&が必要で、&なしにタグをネストした場合には無視されるという制限がありました。
.parent {
/* ⭕ Valid */
& div {
color: blue;
}
/* ❎ Invalid */
p {
color: red;
}
}
この例の場合、&なしにネストしたpへのスタイルは無視されていました。
この制限はCSSのパーサーによる制限で、&がないとプロパティなのかセレクタなのかを事前に認識できないというところから来ていました。
&なしに対応していない場合redにならない
&がなくてもタグをネストできるようになった
このCSSパーサーによる制限が改善され、&を使わずにタグがネストできるようになりました。
.parent {
/* ⭕ Valid */
& div {
color: blue;
}
/* ⭕ Valid */
p {
color: red;
}
}
次の埋め込みで「＆なし」がredで見えている場合には&なしでの入れ子に対応したブラウザで閲覧しているということになります。
ブラウザの対応状況
この構文の更新はすでにChrome・Firefox・Safari(17.2)でサポートされています。
Discussion