Справочник CSS

:root

Псевдо-класс :root представляет «родительский» элемент самого высокого уровня в DOM. Он определен в спецификации CSS Selectors Level 3.

В HTML-документе :root ссылается на элемент html, т.к. элемент html всегда будет родителем самого высокого уровня. Однако, поскольку CSS можно использовать с другими форматами документов, такими как SVG и XML, псевдо-класс :root может ссылаться на разные элементы. Независимо от языка разметки :root всегда выбирает самый верхний элемент в дереве документа.

Хотя селекторы :root и html ссылаются на один и тот же элемент HTML, :root имеет более высокую специфичность. Селекторы по псевдо-классам (но не по псевдо-элементам) имеют специфичность, равную специфичности селекторов по классам, которая выше, чем специфичность селекторов по элементам.

Псевдо-класс :root удобно использовать для объявления глобальных переменных:


:root {
    --main-color: #5cab22;
}

Chrome Opera Firefox IE Edge Safari iOS Safari Opera Mini Android Browser Chrome for Android
Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes