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.

おすすめ記事

記事・ニュース一覧