ywork2020.com

Title

ルート要素を検知する

目次 (INDEX)

:rootとは

ここで説明する:root とは次の語句からなるCSSの疑似クラスです。
root
読み: ルート
意味: 根本、付け根

目次に戻る

:root疑似クラスの概要

この疑似クラスはhtml要素を表し、詳細度が高いことを除けばhtmlセレクターと同等です。

詳細度はブラウザがスタイルの適用を決定する手段です。 例えば:rootセレクターとhtmlセレクターで同じCSSプロパティを違う値で設定した場合、:rootの設定を決定とします。

通常、同じ詳細度のセレクターの場合、コード中で後述した設定を決定としますが、 htmlセレクターを後に記述した場合でも:rootセレクターの詳細度の方が高いのでhtmlセレクターではプロパティ値の上書きはできないということになります。

このセレクターで変数を宣言しておくことで他のセレクターから変数を参照することができるため、 :rootはグローバルのカスタムプロパティを宣言するのに便利です。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。

:root{プロパティ名: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルに使うのはdiv要素です。 :root疑似クラスで宣言した変数(カスタムプロパティ)を使ってdiv要素にプロパティを設定してみます。

目次に戻る

参考: ルート要素でグローバル変数を宣言する

ここではルート要素でカスタムプロパティを宣言して、そのプロパティの値をdiv要素の設定値として使用しています。 カスタムプロパティについては var (バリアブル) のページを参照してください。

div要素

:root{
	--myBGColor: ##lemonchiffon;
	--myBDColor: ##green;
	--myBDStyle: solid;
	--myBDWidth: medium;
	--myMargin: 10px;
	--myPadding: 20px;
	--myWidth: 100px;
	--myHeight: 100px;
}
div{
	background-color: var(--myBGColor);
	border: var(--myBDColor) var(--myBDStyle) var(--myBDWidth);
	margin: var(--myMargin);
	padding: var(--myPadding);
	width: var(--myWidth);
	height: var(--myHeight);
}

目次に戻る