CSSの使用方法:root疑似クラスセレクター
CSS :root
疑似クラスセレクターと、それをプロジェクトでどのように使用したいかについて学びましょう。
CSS :root
疑似クラスセレクターは、特定の仕様の最上位の親を選択するために使用されます。 HTML仕様では、:root
は基本的にhtml
セレクターと同等です。
下のCSSスニペットでは、:root
スタイルとhtml
スタイルは同じことを行います。
:root {
background-color: gray;
}
html {
background-color: gray;
}
お気づきの方もいらっしゃると思いますが、:rootは基本的にhtmlセレクターと同等です。 実際、:root
セレクターはhtml
よりも多くの権限を持っています。 これは、実際には疑似クラスセレクター(:first-child
や:hover
など)と見なされるためです。
疑似クラスセレクターとして、タグセレクターよりも多くの権限/高い特異性を持っています。
:root {
background-color: blue;
color: white;
}
html {
background-color: red;
color: white;
}
html
セレクターが後に続くにもかかわらず、:root
セレクターは、そのより高い特異性のおかげで、依然として勝ちます!
相互仕様
HTML仕様では、:root
疑似クラスは、最上位の親であるhtml
を対象としています。
CSSはSVGおよびXML用にも設計されているため、実際には:root
を使用でき、別の要素に対応します。
たとえば、SVGでは、最上位の親はsvg
タグです。
:root {
fill: gold;
}
svg {
fill: gold;
}
HTMLと同様に、:root
タグとsvg
タグは同じ要素を選択しますが、:root
セレクターの特異性は高くなります。
実用的な使用法
:root
の実際の使用法は何ですか? 前に説明したように、これはhtml
セレクターの安全な代替品です。
これは、html
セレクターで通常行うことをすべて実行できることを意味します。
:root {
margin: 0;
padding: 0;
color: #0000FF;
font-family: "Helvetica", "Arial", sans-serif;
line-height: 1.5;
}
必要に応じて、このコードをリファクタリングして、 CSSカスタムプロパティを使用して、グローバルレベルで変数を作成できます。
:root {
margin: 0;
padding: 0;
--primary-color: #0000FF;
--body-fonts: "Helvetica", "Arial", sans-serif;
--line-height: 1.5;
}
p {
color: var(--primary-color);
font-family: var(--body-fonts);
line-height: var(--line-height);
}
html
の代わりに:root
を使用することの追加の利点は、SVGグラフィックのスタイルを設定できることです。 🤯
:root {
margin: 0;
padding: 0;
--primary-color: #0000FF;
--body-fonts: "Helvetica", "Arial", sans-serif;
--line-height: 1.5;
}
svg {
font-family: var(--body-fonts);
}
svg circle {
fill: var(--primary-color);
}
:root
疑似クラスセレクタに関する詳細なドキュメントについては、 Mozilla DeveloperNetworkにアクセスしてください。