Псевдокласс :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}
#	Повторять один или больше раз через запятую.	<время>#

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

Internet Explorer	Chrome	Opera	Safari	Firefox
9	1	9.5	1	1

Android	Firefox Mobile	Opera Mobile	Safari Mobile
1	1	10	1

✖

Браузеры

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

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

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

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