새로운 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()

브라우저 지원

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 78
  • Safari: 14

소스

:where()

브라우저 지원

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 78
  • Safari: 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()와 함께 단순 및 복잡한 선택기 사용

선택기를 복습하려면 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()는 크게 다릅니다. 특이성에 관해 알아보려면 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 제공)