備忘録的プログラミングリファレンス

:root クラス

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

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

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

:root 例
:root{
	--my-element-back-color: #008A10;
	--my-text-back-color: #E5FFE8;
}
詳しくはExampleを参照してください

ページ内 Index

構文(Syntax)

CSS

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

DOM ( JavaScript )

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

in HTML


in JavaScript


Example

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