[CSS] html, :root, * 선택자

 

1. html

하는 css 규칙은 html에 적용되고 html 안에 포함된 요소들에도 상속된다.

아래의 css 변수 예제에서 사용했던 논리

html {
  --color-grey-100: rgb(236, 236, 236);
  --color-grey-400: rgb(134, 134, 134);
  --color-grey-600: rgb(58, 58, 58);
  --color-grey-900: rgb(41, 41, 41);

  --color-primary-300: rgb(167, 226, 255);
  --color-primary-700: rgb(0, 170, 255);

  --size-1: 18px;
  --size-5: 50px;

  background-color: var(--color-grey-100);
}

 

 

2. :root 가상 선택자

문서의 최상위 요소를 선택한다. 이 경우 css 규칙은 최상위 요소에 적용되어서 최상위 요소 안에 포함된 요소에 상속된다.

html과 :root의 차이

• html 관련 프로젝트인 웹 테이블 등에서는 두 선택자가 하는 일이 거의 똑같지만, css를 사용할 수 있는 다른 영역들이 있다.(ex. xml) 이러한 다른 영역에서는 html 요소가 최상위 요소가 아니라는 점에서 차이가 있다.
• css의 특수성의 개념에서 보면 :root 선택자가 html 선택자보다 더 높기 때문에 :root 선택자가 html 선택자를 덮어쓴다. 참고 블로그

 

3. * 선택자

* 선택자는 단순하게 html 문서의 모든 요소를 선택한다. 이는 css 규칙을 모든 요소에 바로 적용해버린다는 의미이다.

 

 

html과 :root 선택자는 css 규칙이 포함된 요소로 상속되는 것이고, * 선택자는 규칙을 html 문서의 모든 요소에 바로 추가하여 적용한다는 점에서 차이가 있다.