Псевдокласс :root

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

Оцените статью
Инструкции для Web
Добавить комментарии