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

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 01.08.2018
Редакторы: Влад Мержевич