가상클래스 :is()와 :where() 비교

가상 클래스 :is()와 :where()는 반복되는 CSS 선택자를 줄여주는 역할을 합니다.

두 가상클래스 모두 클래스, ID, 태그 등을 파라미터로 받으며, 파라미터에 포함된 목록 중 하나만 일치하면 선택자에서 선택한 것이 됩니다.

 

이해하기 쉽게 다음 CSS 선택자를 예를 들어 설명합니다.

 

.menu li a:hover, article p a:hover, footer li a:hover{
    color: #a00;
    text-decoration: underline;
}

 

여러 개의 반복되는 이런 공통 적용 선택자를 나열한 CSS 정의는 ":where()" 가상 클래스로 다음과 같이 바꿀 수 있습니다.

 

:where(.menu li, article p, footer li) a:hover {
    color: #a00;
    text-decoration: underline;
}

 

시각적으로도 어느 부분이 선택적인 부분들이고, 어떤 대상에 대해서 속성을 적용하는 것인지를 명확하게 구분할 수 있습니다.

":where()" 가상클래스는 괄호 안의 쉼표로 구분해 나열한 선택자에 해당하는 것은 모두 적용됩니다.

 

":is()" 가상클래스로도 똑같이 작성할 수 있습니다. 다른 점은 "where"를 "is"로 바꾼 것뿐입니다.

 

is(.menu li, article p, footer li) a:hover {
    color: #a00;
    text-decoration: underline;
}

 

똑같은 기능을 하는 가상 클래스가 2개나 있지만, 둘은 다른 차이점이 하나 있습니다.

":is()"는 다른 CSS 선택자와 같은 우선순위를 가집니다. 반면 ":where()"는 우선순위가 가장 낮습니다.

다음 예를 적용하면 글자 색상은 녹색(green)이 됩니다.

":where()" 가상 클래스는 우선 순위가 가장 낮기 때문에 앞의 CSS 선택자를 덮어쓰지 못합니다.

 

is(.menu li) a:hover {
    color: red;
}

.menu li a:hover{
    color: green;
}

:where(.menu li) a:hover {
    color: blue;
}