HTML 문서에서 최상위(루트) 요소를 스타일링하려면 CSS의 :root 선택자를 사용하면 됩니다. :root는 문서 트리의 루트 요소, 즉 HTML 문서에서는 <html> 요소를 가리킵니다.
:root 선택자란?
:root는 가상 클래스(pseudo-class)로, 문서의 최상위 요소를 선택합니다. HTML 문서에서 루트 요소는 항상 <html>이므로, 사실상 html 타입 선택자와 같은 대상을 가리키지만 두 가지 중요한 차이점이 있습니다.
- 명시도(specificity)가 더 높습니다.
:root는 클래스 선택자와 동일한 명시도(0,1,0)를 가지므로, 타입 선택자인html(0,0,1)보다 우선 적용됩니다. - CSS 변수(Custom Properties) 선언에 활용됩니다. 전역적으로 사용할 CSS 변수를 정의할 때 일반적으로
:root에 선언합니다.
예제 코드
아래 코드는 :root 선택자를 사용하여 페이지 전체 배경을 파란색으로, 기본 글자 색을 흰색으로 지정하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
:root {
background: blue;
color: white;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>This is demo text.</p>
</body>
</html>실행 결과
위 코드를 실행하면 문서 전체 배경이 파란색으로 변경되고, 제목과 본문 텍스트가 흰색으로 표시됩니다. 이는 :root에 설정된 스타일이 하위 요소들에 상속되기 때문입니다.
CSS 변수와 함께 활용하기
:root의 가장 실용적인 활용법은 전역 CSS 변수를 선언하는 것입니다.
:root {
--main-color: #3498db;
--font-size: 16px;
}
body {
color: var(--main-color);
font-size: var(--font-size);
}이렇게 하면 테마 색상이나 기본 폰트 크기를 한 곳에서 관리할 수 있어 유지보수가 훨씬 쉬워집니다.