:root
:root は CSS の擬似クラスで、文書を表すツリーのルート要素を選択します。 HTML では :root は <html> 要素を表し、詳細度が高い (0-1-0) ことを除けば html セレクター (0-0-1) と同等です。
css
/* 文書のルート要素（HTML の場合は <html>）を選択 */ :root { background: yellow; }
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
基本構文
CSS
:root {
--color-primary: #3498db;
--spacing-md: 16px;
--font-base: 1rem;
}ライブデモ
実務での使いどころ
-
グローバルCSS変数の定義
テーマカラー、スペーシング、フォントサイズなどのデザイントークンを:rootに定義し、サイト全体で一貫したスタイルを管理します。
注意点
- :rootはhtml要素セレクターよりも詳細度が高い（擬似クラスの詳細度）ため、カスケードの順序に影響する場合があります。
アクセシビリティ
- :rootでフォントサイズを設定する場合、固定pxではなく%やemで指定し、ユーザーのブラウザ設定を尊重してください。