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);
}