CSS 사용 방법 :root 의사 클래스 선택기

CSS :root 의사 클래스 선택기에 대해 알아보고 이를 프로젝트에서 어떻게 사용하고 싶을지 모릅니다!

CSS :root 의사 클래스 선택기는 주어진 명세의 최상위 부모를 선택하는 데 사용됩니다. HTML 사양에서 :root는 기본적으로 html 선택기와 동일합니다.

아래의 CSS 스니펫에서 :root 및 html 스타일은 동일한 작업을 수행합니다.

:root {
  background-color: gray;
}

html {
  background-color: gray;
}

:root는 기본적으로 html 선택기와 동일하다고 말했습니다. 실제로 :root 선택자는 html보다 더 많은 권한을 가집니다. 이는 실제로 가상 클래스 선택자(예: :first-child 또는 :hover)로 간주되기 때문입니다.

의사 클래스 선택자로서 태그 선택자보다 권한/특이성이 더 높습니다.

:root {
  background-color: blue;
  color: white;
}

html {
  background-color: red;
  color: white;
}

뒤에 오는 html 선택자에도 불구하고 :root 선택자는 더 높은 특이성 덕분에 여전히 이깁니다!

교차 사양

HTML 사양에서 :root 의사 클래스는 최상위 수준 부모인 html을 대상으로 합니다.

CSS도 XML용으로 설계되었으므로 실제로 :root를 사용할 수 있으며 이는 다른 요소에 해당합니다.

예를 들어 SVG에서 가장 높은 수준의 부모는 svg 태그입니다.

:root {
  fill: gold;
}

svg {
  fill: gold;
}

HTML과 유사하게 :root 및 svg 태그는 동일한 요소를 선택하지만 :root 선택기는 더 높은 특이성을 갖습니다.

실용적인 용도

:root의 실제 용도는 무엇입니까? 앞에서 다룬 것처럼 html 선택자를 안전하게 대체할 수 있습니다.

이는 html 선택기로 일반적으로 수행하는 모든 작업을 수행할 수 있음을 의미합니다.

:root {
  margin: 0;
  padding: 0;
  color: #0000FF;
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
}

원하는 경우 이 코드를 리팩터링하여 CSS 사용자 지정 속성을 사용하여 전역 수준에서 변수를 만들 수 있습니다!

:root {
  margin: 0;
  padding: 0;
  --primary-color: #0000FF;
  --body-fonts: "Helvetica", "Arial", sans-serif;
  --line-height: 1.5;
}

p {
  color: var(--primary-color);
  font-family: var(--body-fonts);
  line-height: var(--line-height);
}

html 대신 :root를 사용하는 추가 이점은 SVG 그래픽의 스타일을 지정할 수 있다는 것입니다! 🤯

:root {
  margin: 0;
  padding: 0;
  --primary-color: #0000FF;
  --body-fonts: "Helvetica", "Arial", sans-serif;
  --line-height: 1.5;
}

svg {
  font-family: var(--body-fonts);
}

svg circle {
  fill: var(--primary-color);
}

:root 의사 클래스 선택기에 대한 광범위한 문서를 보려면 Mozilla Developer Network를 방문하십시오.