:root

Псевдокласс :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 работать не будет.