CSS :where()와 :is() 차이, 선택자 우선순위는 어떻게 달라질까?

CSS를 작성하다 보면 비슷한 선택자를 여러 번 반복하게 되는 경우가 있습니다. 버튼, 카드, 폼, 메뉴처럼 여러 화면에서 반복되는 요소를 다루다 보면 선택자가 길어지고, 나중에는 어떤 스타일이 더 우선 적용되는지 확인하기 어려워질 수 있습니다.

이럴 때 활용할 수 있는 선택자가 :where()와 :is()입니다. 둘 다 여러 선택자를 한 번에 묶어 쓸 수 있지만, 선택자 우선순위에서는 차이가 있습니다.

디자인키트의 HTML 템플릿이나 웹디자인 소스를 수정할 때도 공통 버튼, 카드, 섹션 제목, 폼 스타일을 반복해서 다루게 됩니다. 이때 :where()와 :is()의 차이를 알고 있으면 CSS를 더 짧게 쓰면서도 나중에 덮어쓰기 쉬운 구조를 만들 수 있습니다.

:where()와 :is()는 왜 사용할까요?

CSS에서는 같은 스타일을 여러 요소에 적용할 때 선택자를 쉼표로 나열할 수 있습니다.

.card h3,
.product-card h3,
.post-card h3 {
    font-size: 20px;
}

이 방식도 사용할 수 있지만, 선택자가 많아지면 코드가 길어지고 반복이 늘어납니다. 이럴 때 :is()나 :where()를 사용하면 선택자를 더 간결하게 묶을 수 있습니다.

:is(.card, .product-card, .post-card) h3 {
    font-size: 20px;
}

위 코드는 카드, 상품 카드, 게시글 카드 안의 h3에 같은 스타일을 적용하는 예시입니다. 여러 선택자를 한 줄 안에서 정리할 수 있어 CSS를 읽기 쉬워집니다.

:is()는 반복 선택자를 줄일 때 유용합니다

:is()는 괄호 안에 여러 선택자를 넣고, 그중 하나에 해당하는 요소를 선택할 수 있습니다.

:is(header, main, footer) a {
    color: #222;
}

이 코드는 header, main, footer 안에 있는 링크에 같은 스타일을 적용합니다. 기존 방식으로 쓰면 아래처럼 반복됩니다.

header a,
main a,
footer a {
    color: #222;
}

즉, :is()는 반복되는 선택자 구조를 줄일 때 유용합니다. 여러 영역에 같은 규칙을 적용해야 할 때 코드가 짧아지고 관리하기 쉬워집니다.

다만 :is()는 괄호 안 선택자 중 가장 구체적인 선택자의 우선순위를 따라갑니다. 그래서 괄호 안에 ID 선택자처럼 강한 선택자가 들어가면 전체 우선순위도 높아질 수 있습니다.

:where()는 덮어쓰기 쉬운 CSS를 만들 때 유용합니다

:where()도 여러 선택자를 묶을 수 있습니다. 사용법만 보면 :is()와 비슷합니다.

:where(.card, .product-card, .post-card) h3 {
    font-size: 20px;
}

하지만 중요한 차이가 있습니다. :where() 안에 들어간 선택자는 우선순위 계산에 영향을 주지 않습니다.

이 말은 기본 스타일을 낮은 우선순위로 깔아두고, 나중에 다른 CSS로 쉽게 덮어쓸 수 있다는 뜻입니다.

:where(.card) {
    padding: 24px;
    border-radius: 12px;
}

.card {
    padding: 32px;
}

이런 구조는 템플릿 기본 CSS나 공통 스타일을 만들 때 특히 유용합니다. 기본값은 유지하면서도, 필요한 곳에서는 커스텀 CSS로 자연스럽게 덮어쓸 수 있기 때문입니다.

:where()와 :is() 차이 정리

둘 다 선택자를 묶는 기능을 하지만, 우선순위 기준이 다릅니다.

간단히 말하면, :is()는 “반복 선택자를 짧게 쓰는 방법”에 가깝고, :where()는 “나중에 덮어쓰기 쉬운 CSS를 만드는 방법”에 가깝습니다.

템플릿 CSS에서는 어떻게 활용할 수 있을까요?

HTML 템플릿을 수정할 때는 기본 CSS와 커스텀 CSS가 함께 쓰이는 경우가 많습니다. 이때 기본 CSS의 우선순위가 너무 높으면 나중에 색상, 여백, 폰트 크기를 바꾸기 어려워집니다.

여러 버튼에 기본 스타일을 적용해야 한다면 :where()로 낮은 우선순위의 공통 스타일을 만들 수 있습니다.

:where(.btn, .button, .submit-button) {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
}

.contact-form .button {
    border-radius: 20px;
}

이렇게 작성하면 기본 버튼 스타일은 유지하면서도, 특정 영역의 버튼만 따로 수정하기 쉬워집니다.

반대로 여러 영역에 같은 스타일을 빠르게 적용해야 한다면 :is()가 더 읽기 좋을 수 있습니다. 즉, 공통 기본값을 낮은 우선순위로 깔고 싶을 때는 :where(), 반복되는 선택자를 간단히 묶고 싶을 때는 :is()를 검토하면 됩니다.

디자인키트 템플릿 수정 시 확인할 부분

디자인키트의 HTML 템플릿이나 웹디자인 소스를 수정할 때는 CSS 선택자가 얼마나 강하게 작성되어 있는지 확인하는 것이 좋습니다.

특히 버튼, 카드, 폼처럼 반복되는 UI가 많거나, 특정 페이지에서만 스타일을 쉽게 덮어써야 하는 경우라면 :where()와 :is()를 활용할 수 있습니다.

기존 템플릿을 수정할 때는 전체 CSS를 한 번에 바꾸기보다, 반복되는 요소부터 작게 적용해보는 편이 안전합니다. 적용 후에는 PC와 모바일 화면에서 스타일이 예상대로 유지되는지도 함께 확인해야 합니다.

자주 묻는 질문

선택자는 나중에 수정하기 쉽게 써야 합니다

CSS 선택자는 짧게 쓰는 것도 중요하지만, 나중에 수정하기 쉬운 구조로 작성하는 것이 더 중요합니다. 선택자 우선순위가 불필요하게 높아지면 작은 수정에도 CSS가 복잡해질 수 있습니다.

:is()는 반복되는 선택자를 줄이는 데 도움이 되고, :where()는 우선순위를 낮게 유지하면서 공통 스타일을 작성하는 데 도움이 됩니다. 둘의 차이를 이해하면 !important에 의존하는 상황도 줄일 수 있습니다.

디자인키트의 HTML 템플릿이나 웹디자인 소스를 수정할 때도 버튼, 카드, 폼, 섹션 제목처럼 반복되는 요소를 자주 다루게 됩니다. 이때 :where()와 :is()를 적절히 구분해서 사용하면 템플릿 구조를 유지하면서도 더 유연하게 스타일을 수정할 수 있습니다.