Псевдокласс :rootCSS3-генератор ☛

Псевдокласс :root определяет корневой элемент документа. В HTML этот селектор всегда соответствует элементу <html>, но в стилях приоритет :root выше, чем у селектора html.

Синтаксис ?

:root { ... }
CSS селектор псевдокласса :root используется для выбора родителя самого высокого уровня. Например в HTML :root по сути эквивалентен тегу html.

В приведенном ниже фрагменте CSS стили :root и html делают одно и то же:

:root {
  background-color: gray;
}

html {
  background-color: gray;
}

:root имеет больший “вес” чем тег html. Так получается, потому что он считается селектором псевдокласса (например как :first-child или :hover) и соответственно обладает большей специфичностью (весомостью) чем просто селектор тега.

:root {
  background-color: blue;
  color: white;
}

html {
  background-color: red;
  color: white;
}

Несмотря на то, что стили для тега html были заданы позднее, будут применены стили заданные для :root из-за его более высокой специфичности.

Поскольку CSS разработан также для SVG и XML, вы можете использовать :root и там, только он будет соответствовать другому элементу. Например в SVG он будет эквивалентен тегу svg.

:root {
  fill: gold;
}

svg {
  fill: gold;
}

Как и в html, селекторы :root и svg выбирают один и тот же элемент, однако селектор :root будет иметь более высокую специфичность.

Практическое применение

Как же использовать :root на практике? Как мы уже говорили ранее — это безопасная замена для тега html и вы можете работать с :root как с обычным тегом html.

:root {
  margin: 0;
  padding: 0;
  color: #0000FF;
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
}

Если вы хотите, то можете изменить этот код чтобы использовать кастомные CSS-свойства для создания переменных на глобальном уровне!

:root {
  margin: 0;
  padding: 0;
  --primary-color: #0000FF;
  --body-fonts: "Helvetica", "Arial", sans-serif;
  --line-height: 1.5;
}

p {
  color: var(--primary-color);
  font-family: var(--body-fonts);
  line-height: var(--line-height);
}

Дополнительным преимуществом использования :root вместо html является то, что вы можете стилизовать вашу SVG графику!

:root {
  margin: 0;
  padding: 0;
  --primary-color: #0000FF;
  --body-fonts: "Helvetica", "Arial", sans-serif;
  --line-height: 1.5;
}

svg {
  font-family: var(--body-fonts);
}

svg circle {
  fill: var(--primary-color);
}
✖

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Спецификация ?

СпецификацияСтатус
Selectors Level 4Рабочий проект
Selectors Level 3Рекомендация
✖

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры: Настольные Мобильные     ?

Internet ExplorerChromeOperaSafariFirefox
919.511
AndroidFirefox MobileOpera MobileSafari Mobile
11101
✖

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Псевдоклассы

Справочник CSS