[CSS] :is()와 :where()

:is() 와 :where() 는 요소를 그룹화하는 기능적인 의사 클래스 선택자입니다. 두 선택자의 사용법은 같지만 명시도에 차이가 있습니다.

• :where() 은 명시도가 없습니다.
  :where() 은 매개변수로 전달된 선택자 목록의 모든 명시도를 무시합니다.
• :is() 는 가장 구체적인 선택자의 명시도를 따라갑니다.
  :is(a, div, #id) 의 명시도는 ID의 명시도인 100점입니다.

/* 선택자 처음 */
:where(h1, h2, h3, h4, h5, h6) > b {
  color: hotpink;
}

/* 선택자 중간 */
article :is(header, footer) > p {
  color: gray;
}

/* 선택자 끝 */
.dark-theme :where(button, a) {
  color: rebeccapurple;
}

/* 여러 가지 사용 */
:is(.dark-theme, .dim-theme) :where(button, a) {
  color: rebeccapurple;
}

/* 결합 */
:is(h1, h2):where(.hero, .subtitle) {
  text-transform: uppercase;
}

/* 중첩 */
.hero:is(h1, h2, :is(.header, .boldest)) {
  font-weight: 900;
}

 

해당 포스팅은 이 글을 참고하여 작성했습니다.