CSS псевдокласс :root

Псевдокласс :root выбирает корневой элемент документа. В HTML-документе корневым элементом всегда будет элемент <html>.

Данный псевдокласс обычно используется при написании CSS-кода для языков XML, поскольку корневой элемент может быть разный в каждом языке (например, в SVG это будет элемент <svg>). У Вас может быть даже больше одного корневого элемента в пределах одного языка (но не в пределах одного документа).

В HTML-документах всегда можно выбрать элемент <html> напрямую, используя селектор элемента, без необходимости использовать псевдокласс :root:

/* Выбор элемента <html> */
html { background: #e6ffff; }

Пример

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Название веб-страницы</title>
  <style>
    :root { background: #e6ffff; }
  </style>
</head>
<body>

  <p>Изменяем цвет фона для всего документа.</p>

</body>
</html>

Результат

Изменяем цвет фона для всего документа.