Псевдокласс CSS :root
Псевдокласс CSS :root выбирает корневой элемент документа. Узнайте о псевдоклассе и посмотрите примеры.
Псевдокласс :root pseudo-class соответствует корневому элементу документа — единственному элементу, который содержит все остальные элементы страницы.
В HTML-документе корневым элементом всегда является <html>, поэтому написание :root эквивалентно селектору html — с одним важным отличием: :root имеет более высокую специфичность. Поскольку это псевдокласс, :root обладает той же специфичностью, что и селектор класса (0,1,0), тогда как обычный селектор типа html имеет более низкую специфичность одиночного элемента (0,0,1). Когда правило для :root и правило для html оба нацелены на одно и то же свойство, побеждает правило :root.
В документах SVG и XML :root соответствует тому элементу, который находится на вершине дерева документа, поэтому он не привязан к <html>.
Почему стоит знать :root
Вы могли бы почти всегда заменить :root на html, так зачем он нужен и почему повсеместно используется в современном CSS? Две причины:
- Это место хранения пользовательских свойств CSS (переменных). Объявление переменных в
:rootделает их доступными для каждого элемента на странице, поскольку пользовательские свойства наследуются вниз по дереву. Это самое распространённое применение:rootсегодня. - Более высокая специфичность делает его надёжным местом для задания общедокументных настроек, которые вы не хотите, чтобы случайное правило
html { ... }переопределило.
Синтаксис
:root {
/* CSS declarations */
}Определение глобальных CSS-переменных в :root
Пользовательское свойство — это любое свойство, имя которого начинается с двух дефисов (--brand-color). Его значение можно считать в любом месте с помощью функции var(). Размещение таких объявлений в :root — идиоматический способ создать единый источник истины для цветов, отступов и шрифтов:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--brand: #8ebf42;
--gap: 1.5em;
}
h2 {
color: var(--brand);
}
p {
padding: var(--gap);
border-left: 4px solid var(--brand);
}
</style>
</head>
<body>
<h2>Theme driven by :root variables</h2>
<p>Change one value in :root and both elements update.</p>
</body>
</html>Поскольку переменные находятся в :root, каждое правило ниже может их считать, и изменение одного значения в одном месте изменяет тему всей страницы.
Стилизация самого корневого элемента
:root также может содержать обычные объявления. Здесь он задаёт фон страницы, а body добавляет внутренний отступ, чтобы можно было увидеть корневой элемент позади него:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
background-color: #8ebf42;
padding: 2em;
}
body {
background-color: #eee;
padding: 1.5em;
}
</style>
</head>
<body>
<h2>:root selector example</h2>
<p>Lorem ipsum is simply dummy text</p>
</body>
</html>Комбинирование :root с другими селекторами
:root можно сочетать с псевдоэлементами, такими как ::after, и с другими псевдоклассами, такими как :hover. Удобный паттерн — :root:hover, который позволяет при наведении в любом месте страницы изменить переменную и каскадно применить новое значение везде:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--accent: tomato;
}
:root:hover {
--accent: rebeccapurple;
}
h2 {
color: var(--accent);
}
</style>
</head>
<body>
<h2>Hover anywhere to recolor this heading</h2>
</body>
</html>Подводные камни
:root— это не*.:rootвыбирает только один элемент верхнего уровня, тогда как универсальный селектор*выбирает каждый элемент. Используйте:rootдля настроек уровня документа, а не для «выбора всего».- Специфичность имеет значение. Поскольку
:rootпревосходитhtmlпо специфичности, последующее правилоhtml { ... }не переопределит правило:rootдля того же свойства — это частое удивление при смешивании двух подходов. - Это всё ещё один элемент. Стилизация
:rootстилизует<html>; она не стилизует автоматически<body>или что-либо внутри него.
Поддержка браузерами и спецификация
:root поддерживается во всех современных браузерах. Он определён в спецификации CSS Selectors: