とほほのCSSネスティング入門
目次
CSSネスティングとは
- Sass や Less と同様に CSS を階層的にネスティングして記述するものです。
- 2023年4月5日リリースの Chrome 112 や Edge 112 で利用可能となりました。
- Safari でも 16.5 Technology Preview 版で利用可能です。
- 2023年8月29日リリースの Firefox 117 でも基本的な機能がサポートされました。
サポート状況
サポート状況の詳細は下記を参照してください。
ネスティング
例えば、次のようなCSSがあります。
これまでのCSS
.parent .child { color: red; }
これを次のように記述することができます。
CSSネスティング
.parent { .child { color: red; } }
子結合子(>
)、次兄弟結合子(+
)、後続兄弟結合子(~
) を使用する場合も次のように記述できます。
これまでのCSS
.parent > .child { color: red; }
CSSネスティング
.parent { > .child { color: red; } }
ネスティングセレクタ(&)
ネストされたCSSにタグ名を使用する場合は、下記の様にネスティングセレクタ &
を記述する必要があります。
CSSネスティング
.parent {
& p { /* .parent p と解釈される */
color: red;
}
}
疑似クラス(:
) や 疑似要素(::
) を用いる場合もネスティングセレクタ(&
)が必要です。
CSSネスティング
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 (日本語版)
Copyright (C) 2023 杜甫々
初版:2023年5月7日 最終更新:2023年9月3日
https://www.tohoho-web.com/ex/css-nesting.html