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