`:root`

Селектор для выбора корневого элемента в HTML и SVG. Часто используют для кастомных свойств.

Время чтения: меньше 5 мин

Кратко

Скопировано

Псевдокласс :root нужен для обращения к самому главному родительскому элементу документа. Его также называют корневым элементом. В случае HTML-документа самым главным родителем всей страницы будет тег <html>. Часто :root используется для того, чтобы задавать кастомные свойства.

Пример

Скопировано

Укажем в документе нужный нам шрифт и создадим несколько кастомных свойств:

        
          
          :root {  font-family: 'Oswald', sans-serif;  --button-size: 40px;  --main-color: #bada55;}
          :root {
  font-family: 'Oswald', sans-serif;
  --button-size: 40px;
  --main-color: #bada55;
}

Как пишется

Скопировано

Пишется, как обычный псевдокласс: после двоеточия пишем слово root. Однако в отличие от других псевдоклассов :root полностью самостоятельный, его не используют в связке с другими селекторами.

Как понять

Скопировано

Корневой элемент — это самая главная обёртка в документе, самый первый родитель. В HTML-документах псевдокласс :root будет ссылаться на тег <html>. Поскольку CSS работает ещё и в SVG-, и XML-файлах, для них корневой элемент будет другим. В SVG-документах родителем будет тег <svg>, а в XML-документах — тег <xml>.

На практике

Скопировано

Лена Райан советует

Скопировано

🛠 Поскольку :root — это псевдокласс, его специфичность будет выше, чем селекторов по тегу html или svg.

В примере ниже фон документа окрасится в персиковый цвет, а не в томатный.

        
          
          :root {  background-color: peachpuff;}html {  background-color: tomato;}
          :root {
  background-color: peachpuff;
}

html {
  background-color: tomato;
}

Открыть демо в новой вкладке

Кратко

Пример

Как пишется

Как понять

На практике

Лена Райан советует

Читайте также

Кастомные свойства

<svg>

<html>

`<svg>`

`<html>`