21 января, 2022 11:53 дп

В этом руководстве вы узнаете, что такое псевдокласс :root в CSS и как его можно использовать в проектах.

Псевдокласс :root используется в CSS для выбора родительского элемента самого высокого уровня внутри заданной спецификации. В спецификации 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;
}

Благодаря своей более высокой специфичности селектор :root применяется несмотря на то, что после него идет селектор html.

Псевдокласс :root в разных спецификациях

В спецификации HTML псевдокласс :root нацелен на родительский элемент самого высокого уровня – html.

Поскольку CSS также разработан для SVG и XML, вы можете использовать :root, но он просто будет соответствовать другому элементу.

Например, в SVG родительским элементом самого высокого уровня является тег svg.

:root { fill: gold;
}
svg { fill: gold;
}

Подобно HTML, теги :root и svg выбирают один и тот же элемент, однако селектор :root будет иметь более высокую специфичность.

Практическое использование :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);
}

Дополнительным преимуществом :root по сравнению с html является возможность стилизовать графику 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 Developer Network.

Дополнительно:  Решение проблемы появления синего экрана смерти? - Пошагово

Tags: CSS, HTML