:is() 와 :where()

CSS에 선택자 구문이 추가되었습니다.
:is() 와 :where()로 선택자들을 그룹화할 수 있습니다.

 

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

section :is(.title, .content) {
	background: #999;
}

button:is(.focus, :focus) {
	border: 2px solid green;
}

 

이 둘의 차이점은 명시도의 차이입니다.
: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>

 

: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;
}

 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility