Селектор :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
имеет более высокую специфичность. Селекторы псевдоклассов (но не псевдоэлементы) имеют приоритет выше, чем селектор базового элемента.