분류 css

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

컨텐츠 정보

  • 조회 266 (작성일 )

본문

CSS 선택기 구문에 대한 이러한 작은 추가 사항은 큰 영향을 미칠 것입니다.


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 및 :where 의사 클래스는 Chromium (> = 88), Firefox (> = 78) 및 Safari (> = 14)에서 지원됩니다. 자세한 내용은 MDN의 브라우저 호환성 표를 참조하십시오. 일부 이전 브라우저 버전에서는 :is() 선택기를 :matches() 또는 -webkit-any()로 지원합니다.

자세한 내용은 MDN의 :is() 페이지를 참조하십시오.


: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()의 차이점 


특이성에 관해서는 :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는 꽤 오랫동안 이와 같은 그룹화 기능에 대해 작업 해 왔으며 여기에 있으며 여전히 대부분 미개척 영역입니다. 더 작은 스타일 시트를 만들고 쉼표를 제거하여 재미있게 보내십시오.


https://web.dev/css-is-and-where/