:where() 및 :is()를 사용하는 CSS 의사 클래스

:where() 및 :is() 가상 클래스에 대해 들어본 적이 없더라도 기분 나빠하지 마십시오. 최근에야 대부분의 브라우저에 소개되었습니다.

그러나 그들은 CSS에서 당신이 가장 좋아하는 새로운 것일 수 있습니다.

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

/* Selects any paragraph inside a header, main
   or footer element that is being hovered */
:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* The above is equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

:is() CSS 의사 클래스 함수는 선택자 목록을 인수로 사용하고 해당 목록의 선택자 중 하나가 선택할 수 있는 요소를 선택합니다. 이는 더 작은 형식으로 큰 선택자를 작성하는 데 유용합니다.

/* Selects any paragraph inside a header, main
   or footer element that is being hovered */
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* The above is equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

:where()와 :is()의 차이점은 :where()는 항상 특이성이 0인 반면 :is()는 인수에서 가장 구체적인 선택자의 특이성을 갖는다는 것입니다.

예를 들어 :where()와 :is()의 차이점을 이해해 봅시다.

<article>
  <h2>:is()-styled links</h2>
  <section class="is-styling">
    <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
  </section>

  <aside class="is-styling">
    <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
  </aside>

  <footer class="is-styling">
    <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
  </footer>
</article>

<article>
  <h2>:where()-styled links</h2>
  <section class="where-styling">
    <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
  </section>

  <aside class="where-styling">
    <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
  </aside>

  <footer class="where-styling">
    <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
  </footer>
</article>

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() 내부의 선택기가 전체 선택기의 특이성에 포함되고 클래스 선택기가 요소 선택기보다 더 높은 특이성을 갖기 때문입니다.

그러나 :where() 내부의 선택기는 특이도가 0이므로 주황색 바닥글 링크는 간단한 선택기로 재정의됩니다.

여기에서 출력 및 전체 코드를 볼 수 있습니다. Difference b/w :where() and :is()

또한 CSS에서 선택기 목록을 사용할 때 선택기 중 하나라도 유효하지 않으면 전체 목록이 유효하지 않은 것으로 간주됩니다. 구문 분석에 실패한 경우 전체 셀렉터 목록이 유효하지 않은 것으로 간주되는 대신 :is() 또는 :where()를 사용하면 올바르지 않거나 지원되지 않는 셀렉터가 무시되고 다른 셀렉터가 사용됩니다.

이것이 유용하기를 바랍니다.