--- title: ':root' slug: 'Web/CSS/:root' tags: - CSS - Layout - Pseudo-class - Reference - Web - セレクター - 疑似クラス translation_of: 'Web/CSS/:root' ---
CSS の :root
疑似クラスは、文書を表すツリーのルート要素を選択します。 HTML では、 :root
は {{HTMLElement("html")}} 要素を表し、詳細度が高いことを除けば html
セレクターと同等です。
/* 文書のルート要素(HTML の場合は <html>)を選択 */ :root { background: yellow; }
:root
はグローバルの CSS 変数を宣言するのに便利です。
:root { --main-color: hotpink; --pane-padding: 5px 42px; }
仕様書 | 策定状況 | コメント |
---|---|---|
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}} | {{Spec2('CSS4 Selectors')}} | 変更なし。 |
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}} | {{Spec2('CSS3 Selectors')}} | 初回定義。 |
{{Compat("css.selectors.root")}}