Как работает псевдокласс :root в CSS

Development | Amber | Комментировать запись

В этом руководстве вы узнаете, что такое псевдокласс :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;
}

Читайте также: Селекторы классов в CSS

Благодаря своей более высокой специфичности селектор :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);
}

Читайте также: Краткое введение в переменные CSS

Дополнительным преимуществом :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.