とほほのCSSネスティング入門

• トップ
• CSSネスティング

• CSSネスティングとは
• サポート状況
• ネスティング
• ネスティングセレクタ(&)
• リンク

CSSネスティングとは

• Sass や Less と同様に CSS を階層的にネスティングして記述するものです。
• 2023年4月5日リリースの Chrome 112 や Edge 112 で利用可能となりました。
• Safari でも 16.5 Technology Preview 版で利用可能です。
• 2023年8月29日リリースの Firefox 117 でも基本的な機能がサポートされました。

サポート状況

サポート状況の詳細は下記を参照してください。

• https://caniuse.com/?search=CSS%20nesting

ネスティング

例えば、次のようなCSSがあります。

.parent .child {
  color: red;
}

これを次のように記述することができます。

.parent {
  .child {
    color: red;
  }
}

子結合子(>)、次兄弟結合子(+)、後続兄弟結合子(~) を使用する場合も次のように記述できます。

.parent > .child {
  color: red;
}

.parent {
  > .child {
    color: red;
  }
}

ネスティングセレクタ(&)

ネストされたCSSにタグ名を使用する場合は、下記の様にネスティングセレクタ & を記述する必要があります。

.parent {
  & p {           /* .parent p と解釈される */
    color: red;
  }
}

疑似クラス(:) や 疑似要素(::) を用いる場合もネスティングセレクタ(&)が必要です。

a {
  &:link { color: #00f; }       /* a:link */
  &:visited { color: #66f; }    /* a:visited */
  &:hover { color: #f00; }      /* a:hover */
}

リンク

• https://w3c.github.io/csswg-drafts/css-nesting/ (英語)
• https://triple-underscore.github.io/css-nesting-ja.html (日本語版)