Reference/Selectors/:where()

김동현·2026년 3월 28일

CSS docs

mdn 학습 번역 - CSS

목록 보기

186/190

:where()

Baseline | Widely available

Chrome, Edge, Firefox, Safari에서 지원돼요.

이 기능은 잘 확립되어 있고 많은 기기와 브라우저 버전에서 작동해요. 2021년 1월부터 모든 브라우저에서 사용 가능했어요.

:where() CSS 의사 클래스 함수는 선택자 목록을 인수로 받아서, 그 목록의 선택자 중 하나로 선택할 수 있는 모든 요소를 선택해요.

:where()와 :is()의 차이점은 :where()는 항상 0 명시도를 가지는 반면, :is()는 인수에 있는 가장 구체적인 선택자의 명시도를 갖는다는 거예요.

직접 해보세요 (Try it)

이 데모에서는 :where()를 사용했을 때 명시도가 어떻게 달라지는지 직접 확인할 수 있어요.

CSS

ol {
  list-style-type: upper-alpha;
  color: darkblue;
}

/* `:where()` 안에 있는 선택자들은 명시도에 영향을 주지 않아요 (0점!)
   그래서 아래 규칙은 순수하게 `ol` 하나만 쓴 규칙보다 우선순위가 밀려서 적용되지 않습니다. */
:where(ol, ul, menu:unsupported) :where(ol, ul) {
  color: green;
}

/* 여기서는 마지막에 `ol`이 레이어 바깥에 명시되어 있어서 스타일이 바뀝니다. */
:where(ol, ul) :where(ol, ul) ol {
  list-style-type: lower-greek;
  color: chocolate;
}

HTML

<ol>
  <li>Saturn</li>
  <li>
    <ul>
      <li>Mimas</li>
      <li>Enceladus</li>
      <li>
        <ol>
          <li>Voyager</li>
          <li>Cassini</li>
        </ol>
      </li>
      <li>Tethys</li>
    </ul>
  </li>
  <li>Uranus</li>
  <li>
    <ol>
      <li>Titania</li>
      <li>Oberon</li>
    </ol>
  </li>
</ol>

구문 (Syntax)

:where(<complex-selector-list>) {
  /* ... */
}

매개변수 (Parameters)

:where() 의사 클래스는 하나 이상의 선택자를 쉼표로 구분한 선택자 리스트(selector list)를 인자로 받아요. 이 리스트 안에는 의사 요소(pseudo-element)를 넣을 수 없지만, 그 외의 단순 선택자, 복합 선택자, 결합 선택자 등은 모두 사용할 수 있답니다.

관대한 선택자 파싱 (Forgiving Selector Parsing)

CSS 명세에 따르면 :is()와 :where()는 관대한 선택자 리스트(forgiving selector list)를 받아들여요.

일반적으로 CSS에서 선택자 리스트를 쓸 때, 그중 하나라도 잘못된(무효한) 선택자가 섞여 있으면 리스트 전체가 무효 처리돼서 스타일이 하나도 적용 안 되거든요. 하지만 :is()나 :where()를 쓰면 리스트 중에 파싱에 실패하는 선택자가 있어도 무시하고, 제대로 된 선택자들만 골라서 스타일을 적용해 줘요. 아주 친절하죠?

:where(:valid, :unsupported) {
  /* ... */
}

위 코드는 :unsupported를 지원하지 않는 브라우저에서도 오류 없이 :valid 부분은 정상적으로 찾아내서 스타일을 입혀줍니다.

하지만 아래처럼 일반적인 방식으로 쓰면 어떻게 될까요?

:valid,
:unsupported {
  /* ... */
}

이 경우에는 브라우저가 :unsupported를 모른다면, 비록 :valid는 지원하더라도 규칙 전체를 그냥 무시해 버립니다.

:where()와 :is() 비교하기 (Comparing :where() and :is())

이 섹션에서는 :where()가 실제로 어떻게 작동하는지 보여주고, 특히 :is()와 어떤 점이 다른지 설명해 드릴게요.

가장 큰 차이점은 바로 명시도(Specificity)입니다!

:is(): 인자로 전달된 선택자들 중 가장 명시도가 높은 선택자의 점수를 따릅니다.
:where(): 인자로 무엇을 넣든 상관없이 명시도가 항상 0입니다.

아래 HTML 구조를 예로 들어볼게요.

<article>
  <h2>:is() 스타일이 적용된 링크</h2>
  <section class="is-styling">
    <p>
      여기는 본문입니다.
      <a href="[https://mozilla.org](https://mozilla.org)">링크가 들어있죠</a>.
    </p>
  </section>

  <aside class="is-styling">
    <p>
      여기는 사이드바입니다.
      <a href="[https://developer.mozilla.org](https://developer.mozilla.org)">여기도 링크가 있어요</a>.
    </p>
  </aside>

  <footer class="is-styling">
    <p>
      여기는 푸터입니다.
      <a href="[https://github.com/mdn](https://github.com/mdn)">링크 하나 더 추가요</a>.
    </p>
  </footer>
</article>

<article>
  <h2>:where() 스타일이 적용된 링크</h2>
  <section class="where-styling">
    <p>
      여기는 본문입니다.
      <a href="[https://mozilla.org](https://mozilla.org)">링크가 들어있죠</a>.
    </p>
  </section>

  <aside class="where-styling">
    <p>
      여기는 사이드바입니다.
      <a href="[https://developer.mozilla.org](https://developer.mozilla.org)">여기도 링크가 있어요</a>.
    </p>
  </aside>

  <footer class="where-styling">
    <p>
      여기는 푸터입니다.
      <a href="[https://github.com/mdn](https://github.com/mdn)">링크 하나 더 추가요</a>.
    </p>
  </footer>
</article>

이 두 그룹의 링크들을 선택하기 위해 :is()와 :where()를 아래처럼 사용할 수 있어요.

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

/* `:is()`를 쓰면 안에 있는 클래스 선택자 때문에 명시도가 높아져요 (빨간색) */
:is(section.is-styling, aside.is-styling, footer.is-styling) a {
  color: red;
}

/* `:where()`를 쓰면 명시도가 0이 됩니다 (주황색) */
:where(section.where-styling, aside.where-styling, footer.where-styling) a {
  color: orange;
}

이제 여기서 아주 중요한 포인트! 나중에 우리가 아주 단순한 선택자로 푸터에 있는 링크 색깔을 바꾸고 싶다고 해봅시다.

footer a {
  color: blue;
}

결과가 어떻게 될까요?

빨간색 링크: 그대로 빨간색입니다. 왜냐하면 :is() 규칙은 클래스 선택자(.is-styling)를 포함하고 있어서 명시도가 더 높거든요. 단순한 footer a로는 이길 수 없죠.
주황색 링크: 파란색으로 바뀝니다! 왜냐하면 :where() 규칙은 명시도가 0이기 때문이에요. 그래서 아주 점수가 낮은 footer a 규칙이 더 높은 우선순위를 갖게 되어 덮어쓸 수 있게 되는 거죠.