CSS

A special selector that acts like the top parent for setting shared styles or variables across the whole page.

:root

「:root」は、ページ全体をまとめる“いちばん上の親”のような存在です。 CSSでは「どの要素にルールを当てるか」を書きますが、:root はその中でも「ページ全体」に共通して当てたいときに使います。 たとえば「色のテーマ」や「余白の基準」など、どこからでも参照したい「共通の変数（カスタムプロパティ）」をまとめて書くのにぴったりです。

実際に使うときは、こんな感じです

:root {
    --main-color: #4CAF50;
    --text-size: 16px;
}

body {
    color: var(--main-color);
    font-size: var(--text-size);
}

上の例では、:root の中で「--main-color」「--text-size」という２つの変数を作っています。

そして、var()関数を使って、それを他のスタイルに使い回しています。

つまり、ページ全体で使う“共通ルール置き場”としての役割があるんですね。