Псевдокласс :root соответствует корневому элементу <html>. Таким образом, селекторы :root и html применяют стиль к одному и тому же элементу <html>.
Тем не менее, между :root и html есть небольшое отличие — у :root приоритет выше, чем у селектора html. Если задать одинаковые стилевые правила для этих селекторов, то стиль :root переопределит стиль html. В примере 1 показана такая ситуация.
Пример 1. Переопределение стиля
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:root</title>
<style>
:root {
background-color: #00a651; /* Зелёный цвет фона */
color: #fff; /* Цвет текста */
}
html {
background-color: #f190ac; /* Розовый цвет фона */
}
</style>
</head>
<body>
<p>Текст</p>
</body>
</html>
В данном примере используется два селектора с одним свойством background-color, но с разными значениями. Поскольку приоритет :root выше, чем у html, то для веб-страницы будет задан зелёный цвет фона.
Псевдокласс :root также применяется для определения переменных, которые ниже можно вставлять вместо конкретных значений стилевых свойств. Имена переменных начинаются с двух дефисов, а значение переменной указывается после двоеточия. В целом, инициализация переменных происходит подобно стилевому свойству.
:root {
--primary-color: #007bff;
}
В дальнейшем, для вызова значения переменной используется ключевое слово var, после которого в круглых скобках пишется имя переменной.
a {
color: var(--primary-color);
}
Это правило соответствует следующей записи, так как вместо var(--primary-color) подставляется значение переменной --primary-color.
a {
color: #007bff;
}
Переменные удобно использовать для больших сайтов со множеством стилевых правил, поскольку они позволяют задать типовые значения в одном месте и легко при необходимости их поменять. Включать переменные в свой стиль не обязательно, добавляйте их при желании, исходя из собственных предпочтений.
В качестве значений переменных допустимо указывать не только цвет, но и текст, числа, единицы размера, в общем, любые допустимые значения стилевых свойств. В примере 2 показано применение переменных для изменения вида кнопки.
Пример 2. Переменные в CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:root</title>
<style>
:root {
--primary-color: #00a651;
--button-color: #fffac0;
--primary-padding: .5rem 1rem;
}
button {
background-color: var(--primary-color);
color: var(--button-color);
padding: var(--primary-padding);
border: none;
}
</style>
</head>
<body>
<button>Текст</button>
</body>
</html>
В данном примере для :root мы определяем несколько переменных, а затем вставляем их в качестве значений.
Браузер Internet Explorer не поддерживает переменные и в нём пример 2 работать не будет.