【CSS】:root擬似クラスセレクターの使用方法

他の方が制作したウェブサイトを確認すると、CSS に:rootで指定している時があります。

:rootとは、何なのでしょうか？

今回は、:root擬似クラスセレクターの使用方法を紹介します。

基本のコードは、以下になります。

:rootは HTML ドキュメント全体のことを指します。

また、htmlと同等なのですが、:rootの方が優先度が高くなります。

例えば、

とすると、ブラウザでは、以下が表示されます。

を追加すると、

背景色が、:rootで指定した色になりました。

また、font-sizeなど、基準となるサイズを:root に設定すると、制作がやりやすくなります。

よくあるのが、font-sizeの初期値が 16px なので、1rem = 10px で計算しやすいように、font-sizeを 62.5％に指定することです。

16px × 62.5% = 10px という計算です。

ブラウザで確認すると、

『晴れときどき曇りでしょう』のfont-sizeが 10px × 1.6 = 16px になりました。

:rootは、変数を指定するときに使いますので、ぜひ試してみてください。