새로운 CSS 함수 의사 클래스 선택기 :is() 및 :where()

CSS 선택자 구문에 이렇게 조금씩 추가하면 큰 영향을 미칠 것입니다.

Adam Argyle

CSS를 작성할 때 동일한 스타일 규칙의 여러 요소를 타겟팅하기 위해 긴 선택기 목록이 생길 수 있습니다. 예를 들어 제목 요소 내에 있는 <b> 태그의 색상을 조정하려면 다음과 같이 작성하면 됩니다.

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

대신 긴 선택기를 피하면서 :is()를 사용하여 가독성을 높일 수 있습니다.

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

가독성과 짧은 선택기 편의성은 :is() 및 :where()가 CSS에 제공하는 값의 일부에 불과합니다. 이 게시물에서는 이러한 두 가지 기능적 의사 선택기의 구문과 값을 살펴봅니다.

:is() 사용 전후의 무한 시각 효과

브라우저 호환성

:is()

브라우저 지원

  • 88
  • 88
  • 78
  • 14

소스

:where()

브라우저 지원

  • 88
  • 88
  • 78
  • 14

소스

:is()님 및 :where()님 소개

이는 기능적인 의사 클래스 선택기로, 끝에 있는 ()와 :로 시작하는 방식을 확인합니다. 이를 요소와 일치하는 런타임 동적 함수 호출이라고 생각하면 됩니다. CSS를 작성할 때 선택기의 중간, 시작, 끝에서 요소를 그룹화할 수 있습니다. 또한 특수성을 변경하여 특이성을 무효화하거나 향상시킬 수 있습니다.

선택기 그룹화

그룹화와 관련하여 :is()가 할 수 있는 모든 작업은 :where()도 가능합니다. 여기에는 선택기의 아무 곳에서나 사용하거나, 중첩하고, 스택하는 작업이 포함됩니다. 모두가 잘 알고 애용하는 완벽한 CSS 유연성을 제공합니다. 예를 들면 다음과 같습니다.

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

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

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

위의 각 선택기 예는 이러한 두 가지 기능 가상 클래스의 유연성을 보여줍니다. 코드에서 :is() 또는 :where()를 활용할 수 있는 부분을 찾으려면 여러 쉼표와 선택기 반복이 있는 선택기를 찾으세요.

:is()를 통해 단순 선택기와 복잡한 선택기 사용

선택기를 알아보려면 Learns CSS의 선택기 모듈을 확인하세요. 다음은 기능을 설명하는 데 도움이 되는 간단한 선택기와 복잡한 선택기의 몇 가지 예입니다.

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

지금까지 :is()와 :where()는 문법적으로 서로 호환됩니다. 이제 어떻게 다른지 살펴보겠습니다.

:is() 및 :where()의 차이

특정성의 경우 :is()와 :where()은 크게 달라집니다. 특정성에 관한 자세한 내용은 Learn CSS의 특이성 모듈을 참고하세요.

간단히 말해

  • :where()에는 특정성이 없습니다.
    :where()는 기능 매개변수로 전달된 선택기 목록의 모든 특정성을 밀어냅니다. 이는 종류 선택기 기능 중 첫 번째 기능입니다.
  • :is()는 가장 구체적인 선택기의 특정성을 가져옵니다.
    :is(a,div,#id)의 특정 ID 점수는 100점입니다.

그룹화에 관심이 많았을 때는 목록에서 가장 높은 특이도 선택기를 선택하기가 쉽지 않았습니다. 저는 높은 특이도 선택기를 자체 선택기로 옮겨 그다지 영향을 미치지 않을 정도로 가독성을 늘릴 수 있었습니다. 예를 들면 다음과 같습니다.

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

:where()를 사용하면 라이브러리에서 특수성 없는 버전을 제공하는 것을 보게 됩니다. 작성자 스타일과 라이브러리 스타일 간의 특이성 경쟁이 끝날 수 있습니다. CSS를 작성할 때 경쟁할 특수성이 없습니다. CSS에서는 이와 같은 그룹화 기능을 꽤 오랫동안 개발해 왔으며, 이 기능은 현재도 대부분 탐색되지 않은 영역입니다. 더 작은 스타일시트를 만들고 쉼표를 삭제해 보세요.

사진: 마커스 윙클러(Unsplash 제공)