В CSS псевдокласс :root нужен для выбора родительского элемента высшего уровня согласно действующей спецификации. Для HTML-документа :root соответствует селектору html.

В коде представленном ниже стили для :root и html имеют одинаковый смысл:

:root {
  background-color: gray;
}

html {
  background-color: gray;
}

Выше мы уже упомянули, что псевдокласс :root по своей значимости эквивалентен селектору html. Но, на самом деле, в CSS :root более значим, чем html, так как он является псевдоклассом (подобно :first-child или :hover). Селекторы псевдоклассов имеют больший вес и более высокую специфичность, чем селекторы тегов.

Например, в коде:

:root {
  background-color: blue;
  color: white;
}

html {
  background-color: red;
  color: white;
}

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

Иные спецификации

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

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

Например, в SVG родителем высшего порядка является тег svg:

:root {
  fill: gold;
}

svg {
  fill: gold;
}

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

Практическое использование

Так для чего же нужен :root в повседневной работе. Как мы заметили ранее, этот псевдокласс является эквивалентом селектора html. А это означает, что с помощью стилей для селектора :root можно делать все, что мы делаем в отношении селектора 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);
}

Возможность стилизовать SVG-графику - еще один плюс использования :root вместо html:

: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 можно получить на сайте MDN.

Спасибо за внимание.