:root

ルート（セレクタ）

意味ルート要素

:rootとは？

:rootセレクタは、ドキュメントツリーのルート要素を選択するのに使います。HTMlでは、:rootは<html>要素のことを表します。:rootセレクタは、CSS変数を定義する際によく使用され、よく使うカラーコードやよく使う影のプロパティなどを管理するのに役立ちます。

:rootの具体的な使い方

カスタムプロパティを定義する例

<style>
    :root {
        --main-color: black;
    }
</style>
<p style='color: var(--main-color);'>テキスト</p>

カスタムプロパティとして--main-colorという変数を定義し、その値を黒に設定しています。

:rootに関するよくある質問

Q. :rootとは何ですか？

A. :rootはCSSのセレクタで、HTMLドキュメントのルート要素（通常は<html>タグ）を選択します。グローバルなCSS変数を定義する際によく使用されます。

Q. :rootと<html>の違いは？

A. :rootと<html>セレクタは通常同じ要素を選択しますが、:rootの方が詳細度（specificity）が高いため、競合する場合は:rootが優先されます。

Q. :rootでの変数定義の利点は？

A. :rootで変数を定義すると、その変数をドキュメント全体で使用できます。これにより、テーマカラーや共通の値を一箇所で管理し、簡単に変更できるようになります。

:rootが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの:rootや:empty、*、[attr^=value]、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。