Как использовать селектор псевдокласса CSS :root

Узнайте о селекторе псевдокласса CSS :root и о том, как вы можете использовать его в своих проектах!

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

Несмотря на то, что селектор html следует за ним, селектор :root по-прежнему выигрывает благодаря его более высокой специфичности!

Перекрестная спецификация

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

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

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

:root {
  fill: gold;
}

svg {
  fill: gold;
}

Как и в HTML, теги :root и svg выбирают один и тот же элемент, однако селектор :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.