Псевдокласс :root

Псевдокласс :root соответствует корневому элементу <html>.

Таким образом, селекторы :root и html применяют стиль к одному и тому же элементу <html>.

Тем не менее, между :root и html есть небольшое отличие — у :root приоритет выше, чем у селектора html. Если задать одинаковые стилевые правила для этих селекторов, то стиль :root переопределит стиль html.

Синтаксис

:root { ... }

Значения

Нет.

Пример

HTML5CSS2.1IECrOpSaFx

<!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>

Браузеры

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

ПрименяетсяК ссылкам (тег <html>)
Ссылка на спецификацию http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3