CSS에서의 :where()와 :is()는 CSS 선택자에서 사용할 수 있는 가상 선택자입니다.
:where()
where() 가상 선택자는 CSS의 범용 선택자(*)와 비슷한 역할을 합니다. 그러나 where()는 구체성이 없는 선택자(*)와 달리 구체성을 지정할 수 있습니다. where() 내부의 선택자가 모두 참인 경우, 해당 요소에 스타일이 적용됩니다. where()를 사용하여 규칙의 중복을 줄이고 선택자의 가독성을 향상시킬 수 있습니다.
예시:
/* 두 선택자 모두 적용됨 */
:where(h1, h2, h3, h4, h5, h6) {
color: red;
}
/* h1 요소에만 적용됨 */
h1:where(:not(.no-color)) {
color: blue;
}위 예시에서 첫 번째 규칙은 h1, h2, h3, h4, h5, h6 모두에 적용되는 스타일을 정의하고 있습니다. 두 번째 규칙은 h1 요소에 대해서만 .no-color 클래스가 없을 때 적용되는 스타일을 정의하고 있습니다.
:is()
:is() 가상 선택자는 CSS의 선택자 그룹을 작성하는 것과 유사합니다. :is() 내부에 작성한 선택자 중 하나가 요소와 일치하는 경우, 해당 요소에 스타일이 적용됩니다.
예시:
/* 두 선택자 모두 적용됨 */
:is(h1, h2, h3, h4, h5, h6) {
color: red;
}
/* h1 요소에만 적용됨 */
h1:is(.no-color, :not(.some-other-class)) {
color: blue;
}위 예시에서 첫 번째 규칙은 h1, h2, h3, h4, h5, h6 모두에 적용되는 스타일을 정의하고 있습니다. 두 번째 규칙은 h1 요소에 대해서만 .no-color 클래스가 있거나 .some-other-class 클래스가 없을 때 적용되는 스타일을 정의하고 있습니다.
where()와 is()는 선택자 그룹을 작성하고, 중복된 코드를 줄이는 데 도움이 되는 매우 유용한 가상 선택자입니다.
단, :where()와 :is() 선택자는 모든 브라우저에서 완벽하게 지원되지 않을 수 있습니다. 따라서, 이들 선택자를 사용할 때, 브라우저 호환성을 고려해야 합니다. (https://caniuse.com/ 사이트에서 검색)
