CSS :root 가상 클래스 선택자 – 문서의 루트 요소 선택

`:root` 가상 클래스 선택자

:root 가상 클래스 선택자는
문서의 루트(root) 요소를 선택합니다.
HTML 문서에서는 루트 요소인 <html> 요소를 선택합니다.

이 선택자는 최상위 요소를 선택한다는 의미적 일관성을 유지하기 위해 사용하며,
글로벌(전역) CSS 변수를 선언할 때 주로 활용됩니다.

HTML 문서에서는 루트 요소인 <html> 요소를 선택합니다.

:root 가상 클래스 선택자를 사용하면 CSS 변수가 문서의 루트에서 정의되었음을 명시적으로 표현할 수 있습니다.

HTML 문서에서는 루트 요소가 <html> 요소이므로, :root 가상 클래스 선택자는 요소 선택자로 html을 선택하는 것 둘 다 <html> 요소를 선택한다는 것에서는 동일하지만 두 가지 차이점이 있습니다.

:root 가상 클래스 선택자가 요소 선택자로 html을 선택하는 것보다 최상위 요소를 선택한다는 의미에서 좀 더 명시적으로 표현할 수 있습니다.
:root 가상 클래스 선택자가 요소 선택자로 html을 선택하는 것보다 스타일 우선순위가 높습니다. 이 것은 구체성 값(혹은 명시도)이 :root 가상 클래스 선택자가 더 크기 때문입니다.

CSS 선택자의 구체성 값

특히, :root 가상 클래스 선택자는 최상위 요소를 선택한다는 의미적 일관성을 유지하기 위해 사용되며,
요소 선택자로 html을 선택하는 것은 <html> 요소 자체(혹은 상속을 위해서)를 스타일링하기 위해서 사용됩니다.

참고 사항

:root 가상 클래스 선택자는 HTML 문서의 루트 요소를 선택합니다. HTML 문서에서는 루트 요소인 <html> 요소를 선택합니다. 그러나 HTML이외의 다른 문서나 문서 구조에서도 적용될 수 있습니다.

그러나, CSS는 HTML 이외의 다른 문서나 문서 구조에도 적용될 수 있습니다.

예를 들어, XML 문서나 SVG(Scalable Vector Graphics) 문서 등도 CSS를 사용하여 스타일을 지정할 수 있습니다. 이러한 경우에는 문서의 루트 요소가 <html> 요소가 아닐 수 있습니다.

따라서, 특정 상황에서는 :root 가상 클래스 선택자가 HTML의 루트 요소가 아닌 다른 문서의 루트 요소를 가리킬 수 있습니다. 하지만 대부분의 웹 개발에서는 HTML 문서를 다루므로, :root 가상 클래스 선택자가 HTML의 루트 요소를 나타내는 것으로 널리 알려져 있습니다.

다음은 XML 문서에서 CSS를 사용하여 스타일을 지정하는 예제입니다.
이때 :root 가상 클래스 선택자는 XML 문서의 루트 요소를 가리킵니다.

XML

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
    <book category="cooking">
        <title lang="en">Everyday Italian</title>
        <author>Giada De Laurentiis</author>
        <year>2005</year>
        <price>30.00</price>
    </book>
    <book category="children">
        <title lang="en">Harry Potter</title>
        <author>J.K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
</bookstore>

위의 XML 예제에서 <bookstore>가 XML 문서의 루트 요소입니다. 이 XML 문서에 CSS를 적용하고자 한다면 다음과 같이 :root 가상 클래스 선택자를 사용할 수 있습니다

CSS

:root { /* 이 XML 문서에서는 루트 요소인 <bookstore> 요소를 선택합니다. */
    font-family: Arial, sans-serif;
}
book {
    display: block;
    margin-bottom: 20px;
}
title {
    font-weight: bold;
}
author {
    font-style: italic;
}
year, price {
    color: #666;
}

이렇게 XML 문서에도 :root 가상 클래스 선택자를 사용하여 스타일을 지정할 수 있습니다.