Firefox 117が8月29日リリースされ、このバージョンから、CSSのネスト記法(CSS Nesting)に基本的な部分で対応した。Chrome・Edge・Safariなどでもすでに基本的なサポートは行われており、これでいわゆるモダンブラウザすべてで使えるようになってきた[1]。
CSSのネスト記法を使うことで、あるセレクターのCSS指定内で、Nesting Style Rulesに沿った形でそのセレクターに関するセレクターや@規則を記述できるようになる[2]。
また、ネスト内で親のセレクターを明示的に指定するネスティングセレクター&
を使うことができる(展開した形を考えると:is()
が使われる形と同等となる)。
.a, .b {
color: white;
background: darkslategray;
&:hover {
background: darkred;
}
}
See the Pen
Untitled by k_taka (@peaceroad)
on CodePen.