【CSS Modules】:root疑似クラスの使い方
:root疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:rootオブジェクトは、ドキュメントツリーのルート要素を表すオブジェクトです。この疑似クラスは、ウェブページの最も上位に位置する要素、例えばHTMLドキュメントでは<html>要素を指し示すために使われます。
主な利用目的は、CSSカスタムプロパティ（CSS変数）を定義する場所にあります。:rootに定義されたカスタムプロパティは、ドキュメント内のどこからでも参照し、再利用することが可能です。これにより、色のパレットやフォントサイズなど、共通して使用する値を一元的に管理できるようになります。例えば、ウェブサイト全体のテーマカラーを変更したい場合、:rootに定義された変数の値を変えるだけで、関連するすべての要素にその変更を適用できるため、効率的なスタイルの管理とメンテナンスが可能です。
htmlセレクタと似ていますが、:rootはHTMLに限らず、任意のマークアップ言語のルート要素を選択できるという点で汎用性があります。また、:root疑似クラスはhtmlセレクタよりも詳細度が高いため、スタイル適用の優先順位において優位に立つことがあります。システムエンジニアを目指す上で、効率的かつ保守性の高いCSSを記述するために、:rootの活用は非常に重要です。
公式リファレンス: :root
構文(syntax)
1:root { 2 --primary-color: #007bff; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません