[SCSS] 가상클래스 :is로 한 꺼번에 선택하기

가상클래스 :is

<div class="container">
    <header>
        <h1></h1>
    </header>
    <section>
        <h1></h1>
    </section>
    <footer>
        <h1></h1>
    </footer>
</div>

/* CSS */
.container header h1 {}
.container section h1 {}
.container footer h1 {}

:is(header, section, footer) h1 {}
header :is(h1, h2, h3) {}

/* SCSS */
.container {
    :is(header, section, footer) h1 {
    }
}

가상클래스 :is는 중복되는 요소들를 한 꺼번에 묶어서 쓸 수 있게 만들어주는 선택자로, 서로 다른 부모/자식 요소가 있고 선택하려는 각 요소가 같을 때 사용하면 좋은 선택자이다. 예를 들어, h1이라는 태그가 header, section, footer에 각각 있다고 할 때 header h1, section h1, footer h1으로 3줄씩 쓰지 않고 :is(header, section, footer) h1으로 1줄 작성이 가능하다. 가상클래스는 SCSS뿐만 아니라 CSS에서도 작동되는 유용한 기능이므로 가볍게 기억만 하고 넘어가자.

 

가상클래스 :where

/* CSS */
.container header h1 {}
.container section h1 {}
.container footer h1 {}

:where(header, section, footer) h1 {}
header :where(h1, h2, h3) {}

/* SCSS */
.container {
    :where(header, section, footer) h1 {
    }
}

가상클래스 :where도 있다. :where와 :is는 같은 가상클래스로 작동 결과도 똑같다.

하지만, :where는 :is에 비해 잘 사용하지 않는다. 이유는 :where이 :is에 비해 우선 순위가 낮기 때문이다.

우리가 CSS를 줄 때, 아래에 있는 코드에 우선 순위를 주고자 한다면 !important를 주는 경우가 많다.

이런 경우처럼 :where는 가상 클래스로 묶어도 내가 footer h1 {} 이라는 스타일을 새로 줬을 때 바로 변하는 반면, :is는 footer h1 {}을 주더라도 우선 순위가 높기 때문에 !important 된 것마냥 바뀌지 않는다.

 

사실 :is와 :where은 생소하기 때문에 잘 사용되지 않을 뿐더러 차이를 따지기에는 미미한 차이라 이 둘을 구분하고 쓰는 것은 의미가 없다. 그냥 '이런 문법도 있구나!' 정도로 기억하고 넘어가면 좋을 것 같다.