[:is()] 선택기를 단순화하는 가상 선택자

:is()

:is 가상 클래스 선택자의 함수는 선택 리스트를 인수로 받고, 리스트의 선택기 중 하나로 선택할 수 있는 요소를 선택한다.

/* header, main, footer의 요소가 hover 되면 css 속성을 적용한다. */
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* 위의 내용은 다음과 같다. */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

Forgiving Selector Parsing

일반적으로 CSS에서 선택기 목록을 사용할 때 선택기 중 하나라도 유효하지 않으면 전체 목록이 유효하지 않은 것으로 간주된다.

:is() 또는 :where()를 사용하면 잘못되었거나 지원되지 않는 선택기는 무시되고 다른 선택기가 사용된다.

/* :unsupported 지원하지 않는 브라우저에서도 올바르게 구문 분석하고 :valid에 적용된다. */
:is(:valid, :unsupported) {
  ...;
}

/* :valid를 지원하더라도 :unsupported를 지원하지 않는 브라우저에서 무시된다. */
:valid,
:unsupported {
  ...;
}

목록 선택기 단순화

ol ol ul,
ol ul ul,
ol menu ul,
ol dir ul,
ol ol menu,
ol ul menu,
ol menu menu,
ol dir menu,
ol ol dir,
ol ul dir,
ol menu dir,
ol dir dir,
ul ol ul,
ul ul ul,
ul menu ul,
ul dir ul,
ul ol menu,
ul ul menu,
ul menu menu,
ul dir menu,
ul ol dir,
ul ul dir,
ul menu dir,
ul dir dir,
menu ol ul,
menu ul ul,
menu menu ul,
menu dir ul,
menu ol menu,
menu ul menu,
menu menu menu,
menu dir menu,
menu ol dir,
menu ul dir,
menu menu dir,
menu dir dir,
dir ol ul,
dir ul ul,
dir menu ul,
dir dir ul,
dir ol menu,
dir ul menu,
dir menu menu,
dir dir menu,
dir ol dir,
dir ul dir,
dir menu dir,
dir dir dir {
  list-style-type: square;
}

/* 위와 같이 복잡한 목록 선택기들을 단순화할 수 있다. */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}

참고사이트

:is