Skip to content
koralle's Front-End Tech Memo

rootセレクタってよくわからないよね

rootセレクタ (:root)って何？

とりあえず、MDNのドキュメントから引用してみる。

:rootはCSSの擬似クラスで、文書を表すツリーのルート要素を選択します。 HTMLでは:rootは<html>要素を表し、詳細度が高いことを除けばhtmlセレクターと同等です。

ざっくりとした定義は理解できた。だけどいくつか気になった点がある。

  1. 「HTMLでは」ということは、他のコンテキストでも:rootセレクタが使われているはずだ。それは具体的になんだろう？
  2. :rootセレクタとhtmlセレクタの詳細度はどちらが高いのだろう？

1. HTML以外のコンテキストで使われる:rootセレクタ

調べた感じ、HTML以外では以下の3つのコンテキストで使われるようだ。

  • SVG
  • XML
  • Web Components

SVG

SVGのコンテキストでは、:rootセレクタは<svg>要素のルートを表す。

例えば、以下のSVGは黒い正円。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" />
</svg>

ここに以下のCSSを適用すると、この黒い正円は青色になる。

:root {
  // すべてのSVGコンテキスト全体に適用される。
  fill: blue;
}

なので、HTMLの構造が以下のようになっている場合、

<html>
  <body>
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" />
    </svg>
  </body>
</html>

このCSSを適用すると、ブラウザには黒背景に黄色い正円が表示される。
:rootセレクタがHTMLコンテキストにおけるルート要素（この場合は<html>要素）と、SVGコンテキストにおけるルート要素（この場合は<svg>要素）を同時に表現していることが分かる。

:root {
  fill: yellow;
  background-color: black;
}

XML

XMLのコンテキストでも:rootセレクタが使えるらしい？その場合はXML文書のルートってことになるっぽい。

Web Components

Web Componentsのコンテキストでも:rootセレクタが使えるらしい？
詳細に調べても得るものは少なそう。

2. :rootセレクタとhtmlセレクタの詳細度の比較

結論から。:rootセレクタの方がhtmlセレクタより詳細度が高い。

これはこのページの内容を読めば明らかなのだが、:rootセレクタはあくまで疑似クラスセレクタとして振る舞う。
なので:rootセレクタの詳細度は(0, 1, 0)である。

一方で、htmlセレクタは要素型セレクタに該当するので、詳細度は(0, 0, 1)である。

詳細度 - CSS: カスケーディングスタイルシート | MDN developer.mozilla.org
詳細度 (Specificity) は、ある要素に最も関連性の高い CSS 宣言を決定するためにブラウザーが使用するアルゴリズムで、これによって、その要素に使用するプロパティ値が決定されます。詳細度のアルゴリズムは、CSS セレクターの重みを計算し、競合する CSS 宣言の中からどのルールを要素に適用するかを決定します。
The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background.