:is() (:where())

* matches()가 is()로 이름이 변경됨.

/* header, main, footer 어떤 엘리먼트 내부에 속해있던지 p:hover 시 css 적용 */
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* 아래의 css값과 동일함. */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor:pointer;
}

 

:where()와 거의 비슷한 기능을 갖고 있지만 명시도에서 차이가 난다. :where()이 0의 명시도를 반면 :is()는 구체적인 명시도를 갖는다.

 

:where(section.where, aside.where, footer.where) p {
  color: red;
}

:is (section.is, aside.is, footer.is) p {
  color: green;
}

footer p {
  color: blue;
}

적용 예시

 

:where()

section

aside

footer

 

:is()

section

aside

footer

 

* :is() - ie, opera, safari 지원 안함