where 선택자 vs is 선택자

다중 요소를 선택할 수 있는 where 선택자와 is 선택자에 대해 알아보자

where와 is 없이 다중 요소에 css적용하는 방법

<header><div>헤더</div></header>
<main><div>메인</div></main>
<aside><div>어사이드</div></aside>
<footer><div>푸터</div></footer>

위 4개의 div의 글자색을 blue로 하는 css 코드는 다음과 같다.

header div,
main div,
aside div,
footer div {
  color: blue;
}

where 와 is 사용하여 다중 요소에 css적용하는 방법

where나 is를 사용하면 더 짧게 작성할 수 있다.

:where(header, main, aside, footer) div {
  color: blue;
}

:is(header, main, aside, footer) div {
  color: blue;
}

where와 is

where는 명시도가 0이고, is는 명시도가 where보다 크다.(요소 선택자와 같다.)

두 개의 선택자 모두 낮은 명시도를 가지고 있다.

명시도 예시

몇 가지 명시도 예시를 살펴보자

where vs 요소 선택자 vs is

where 선택자의 명시도는 0이기 때문에 충돌시 요소 선택자가 적용된다.

is 선택자는 요소 선택자와 명시도가 같기 때문에 충돌시 늦게 작성된 선택자가 적용된다.

<div>
  <p>hi</p>
</div>

따라서 다음과 같은 css를 적용시 color grey가 먼저 적용된다.

:where(div) p {
  color: blue;
}

div p {
  color: red;
}

:is(div) p {
  color: grey;
}

하지만 is와 요소 선택자의 순서를 바꿀경우 color red가 먼저 적용된다.

:where(div) p {
  color: blue;
}

:is(div) p {
  color: grey;
}

div p {
  color: red;
}