:root クラス

　:root クラスは、ドキュメントのルートとなるエレメントを対象にスタイルを反映する擬似クラスです。

　HTMLでのルートエレメントは<html>になります。

　:root クラスによって、全体に統一したカスタム値を設定することができます。
　例えば、色指定をしなくてもカスタム値を使用することで統一した配色ができます。

:root 例

:root{
	--my-element-back-color: #008A10;
	--my-text-back-color: #E5FFE8;
}

詳しくは Example を参照してください

構文(Syntax)

HTMLElement:root {
  style_propaty: value;
	...
}

　疑似クラスはDOM ( JavaScript )から操作できません。
　スタイルのみの操作は擬似クラスを利用したほうが簡易です。

　:rootの例です。 :root クラスの対象はルートエレメントなのですが、１つしかない場合のエレメントも対象に含まれます。
　以下は <div> エレメントの中で同じエレメントが複数ありますが、<p> は１つであるため、そのエレメントが選択されています。