:rootは、文書のルート要素を対象とするCSS擬似クラスです。
一般的に、:rootはHTMLではhtml要素を選択します。主にカスタムプロパティ（CSS変数）の定義に使われ、全体的なスタイル設定を柔軟に管理するために役立ちます。
:rootの値とその効果の一覧
:root: 文書全体のルート要素に適用されるスタイルを指定します。
注意点と関連情報
:rootは、ページ全体にわたるカスタムプロパティ（CSS変数）を定義する際に特に役立ちます。
html要素よりも高い優先度を持つため、グローバルなスタイルを設定する場合に推奨されます。
:rootが効かない理由として考えられること
セレクタの競合が発生している
:rootはHTMLドキュメントの最上位の要素（<html>要素）に適用されるため、通常のセレクタでは競合しにくいですが、他の強いセレクタや!importantが適用されている場合、スタイルが上書きされてしまう可能性があります。
対策：ブラウザの開発者ツールを使用して、他のスタイルが:rootのスタイルを上書きしていないか確認し、必要に応じて!importantを使用して優先順位を高めます。
限定的な影響範囲しかない
:rootで指定したスタイルは、グローバルな範囲で適用されますが、特定のコンポーネントやセクションごとにスタイルを設定している場合、:rootで設定したグローバルスタイルが一部に反映されないことがあります。
対策：スタイルが特定の範囲やコンポーネントに限定されていないか確認し、:rootで指定した変数が全体に適用されることを確認します。
表示例
CSS :root
以下の例では、:rootで定義したカスタムプロパティを使用して、背景色やテキストの色を設定します。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box">ボックス1</div>
</div>
CSSコード
:root {
--main-bg-color: #ffe0b2;
--main-text-color: #e65100;
}
.css-sample-box {
width: 200px;
height: 100px;
background-color: var(--main-bg-color);
color: var(--main-text-color);
display: flex;
justify-content: center;
align-items: center;
}