CSSのネスト記法がFirefox 117でも対応、すべてのモダンブラウザでサポートへ

Firefox 117が8月29日リリースされ、このバージョンから、CSSのネスト記法（CSS Nesting）に基本的な部分で対応した。Chrome・Edge・Safariなどでもすでに基本的なサポートは行われており、これでいわゆるモダンブラウザすべてで使えるようになってきた[1]。

CSSのネスト記法を使うことで、あるセレクターのCSS指定内で、Nesting Style Rulesに沿った形でそのセレクターに関するセレクターや@規則を記述できるようになる[2]。

CSSネストが使えない場合には、親のセレクタの記述が必要だった

.parent {
  color: red;
}
.parent > .self {
  color: green;
}
.parent > .self > .child {
  color: blue;
}
@media (max-width: 600px) {
  .parent {
    background: lightpink;
  }
}
.parent aside {
    background: lightgray;
}

上記のCSSを、CSSネストを利用して記述したもの

.parent {
  color: red;
  > .self {
    color: green;
    > .child {
      color: blue;
    }
  }
  @media (max-width: 600px) {
    background: lightpink;
  }
  /* 仕様が改定されて要素名のみのセレクタにーも使えるようになったが、
     現時点のブラウザでは処理されずに無視される場合がある。*/
  aside {
    background: lightgray;
  }
}

また、ネスト内で親のセレクターを明示的に指定するネスティングセレクター&を使うことができる（展開した形を考えると:is()が使われる形と同等となる⁠）⁠。

.a, .b {
  color: white;
  background: darkslategray;
  &:hover {
    background: darkred;
  }
}
/* 以下と同等。
.a, .b {
  color: white;
  background: darkslategray;
}
:is(.a, .b):hover {
  background: darkred;
}
*/

See the Pen Untitled by k_taka (@peaceroad) on CodePen.