:root
Псевдокласс :root соответствует корневому элементу <html>. Таким образом, селекторы :root и html применяют стиль к одному и тому же элементу <html>.
Тем не менее, между :root и html есть небольшое отличие — у :root приоритет выше, чем у селектора html. Если задать одинаковые стилевые правила для этих селекторов, то стиль :root переопределит стиль html. В примере 1 показана такая ситуация.
Пример 1. Переопределение стиля
В данном примере используется два селектора с одним свойством 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
В данном примере для :root мы определяем несколько переменных, а затем вставляем их в качестве значений.
Браузер Internet Explorer не поддерживает переменные и в нём пример 2 работать не будет.