root 가상 클래스

가상 클래스 : +, >같은 조합자나 id, class 같은 단순 선택자로 선택할 수 없는 것들을 선택하게 해주는 선택자

이는 요소의 속성, 상태, 상대적 위치 등에 기반하여 요소를 선택하게 해줌.

구조적 가상 클래스(structural pseudo-classes) : 문서 구조에서 위치나, 다른 요소와의 관계에 따라 요소를 선택하는 선택자

[구조적 가상 클래스 종류]

:root

:only-child

:nth-child(n)

:nth-last-child(n)

:first-of-type

:last-of-type

:only-of-type

:nth-of-type(n)

:nth-last-of-type(n)

:empty

:first-child

:last-child

:root 가상 클래스

문서 구조에서 root요소에 적용 (가장 상위 단계의 부모요소)

html에서 root요소는 항상 html요소임.

하지만 style 적용 우선 순위에서, specify값은 html요소보다 :root 가상 클래스가 더 높음

*스타일 적용 우선순위와 속성 강제 적용 (html요소 1점, :root 가상 클래스는 10점)

문법: :root{속성:속성값;}

PURPLE WOOD LIGHTS