[CSS] :is()와 :where() — CSS의 새 기능

최근 많은 브라우저가 CSS의 새로운 가상 클래스인 :where()과 :is()를 지원하고 있습니다. 해당 클래스는 어떤 작용을 하는 지, 차이점으로는 무엇이 있는 지 알아보도록 합시다.

:where()

:where() 가상 클래스 함수는 선택자 목록을 인수로 취하고 해당 목록의 선택자 중 하나가 선택할 수 있는 모든 요소를 선택합니다.

:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

위의 코드는

header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

실제로 이렇게 풀어지죠.

:is()

:is()도 :where()와 크게 다르지 않습니다.

:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

위의 코드는

header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

이렇게 풀어지게 됩니다.

:where()와 :is()의 차이점

:where()와 :is()는 같은 것 처럼 보입니다. 실제로 하는 일은 같은데, 둘의 차이점엔 뭐가 있을까요? 바로 CSS 점수 계산에 차이가 있습니다. :is() 같은 경우 다른 가상 클래스와 같이 10점인 반면, :where()의 경우 0의 점수를 가지게 됩니다. 그래서 만약,

html {
  font-family: sans-serif;
  font-size: 150%;
}

:is(section.is-styling, aside.is-styling, footer.is-styling) a {
  color: red;
}

:where(section.where-styling, aside.where-styling, footer.where-styling) a {
  color: orange;
}

위와 같은 코드에

footer a {
  color: blue;
}

단순한 선택자로 스타일을 재정의하게 된다면, :is() 에서 준 red 컬러는 먹지 않을 것입니다. a 선택자는 CSS 점수 계산에 따라 1점으로, 10점인 :is()가 더욱 높기 때문이죠. 반면 :where() 같은 경우 0점으로 계산되므로, 스타일이 재정의 될 것입니다.

점점 많은 브라우저가 :where()와 :is()를 지원해주고 있는 추세인데요. 이 가상 클래스들만으로도 CSS를 좀 더 짧고 간단하게 표현할 수 있어 큰 장점이 될 것 같네요.