Zenn
Open2

75. CSSでルート要素を選択するショートハンドセレクタ

CSS
HTML
たかもそたかもそ

CSSで変数などを定義するときにルート要素 :root { ... } セレクタや html { ... } セレクタを使うと思いますが、CSSルールの入れ子構文であるCSS Nestingが実装されたおかげでこんな書き方もできるようになりました。

& {
  --custom-properties: value;

  overflow-wrap: anywhere;
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}
たかもそたかもそ

詳細度の違い

:root { ... } や html { ... } セレクタと比べて詳細度が低いので、以下の例では背景色が赤色になります。

:root {
  background-color: red;
}

& {
  background-color: blue;
}