Селектор :root позволяет выбрать «родительский» элемент самого высокого уровня в DOM или дереве документов.
В подавляющем большинстве случаев :root на веб-странице относится к элементу <html>. В документе HTML элемент <html> всегда будет родителем самого высокого уровня. Однако, поскольку CSS — это язык стилей, который можно использовать с другими форматами документов, такими как SVG и XML, псевдокласс :root в этих случаях может ссылаться на разные элементы. Независимо от языка разметки :root всегда будет выбирать самый верхний элемент в дереве документа.
В приведенном ниже примере селектор :root используется для создания цвета фона за пределами элемента <body>. В этом случае того же эффекта можно добиться, используя вместо этого селектор элемента html.
See the Pen
root by Андрей (@adlibi)
on CodePen.
Хотя селектор
:rootи селекторhtmlориентированы на одни и те же элементы HTML, полезно знать, что:rootимеет более высокую специфичность. Селекторы псевдоклассов (но не псевдоэлементы) имеют приоритет выше, чем селектор базового элемента.