:root

CSS :root 의사 클래스는 문서 트리의 루트 요소를 선택합니다 HTML의 루트 요소는 <html> 요소이므로, :root명시도가 더 낮다는 점을 제외하면 html 선택자와 똑같습니다.

/* 문서의 루트 요소 선택
   HTML에서는 <html> */
:root {
  background: yellow;
}

구문

:root

예제

전역 CSS 변수 선언하기

:root는 전역 CSS 변수 선언에 유용하게 사용할 수 있습니다.

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

명세

Specification Status Comment
Selectors Level 4
The definition of ':root' in that specification.
Working Draft No change.
Selectors Level 3
The definition of ':root' in that specification.
Recommendation Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:rootChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9.5Safari Full support 1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

같이 보기