CSS에서 스타일을 적용할 때 특정 요소를 대상으로 선택하는 방법은 매우 다양합니다. 그중에서도 :where() 가상 선택자는 코드의 유지보수성과 가독성을 높이는 데 유용한 기능을 제공합니다. 이번 글에서는 :where() 선택자가 무엇인지, 어떻게 사용하면 좋은지, 그리고 비슷한 역할을 하는 다른 가상 선택자들과 비교하여 알아보겠습니다.
1. :where() 가상 선택자란?
:where()는 CSS에서 선택자의 그룹을 정의할 때 사용되는 가상 선택자입니다. :where() 안에 포함된 선택자 중 하나라도 일치하면 스타일이 적용됩니다. 마치 :is() 선택자와 비슷하지만, :where()는 우선순위를 0으로 처리한다는 차이점이 있습니다. 즉, 스타일 충돌 시 다른 스타일이 우선 적용되도록 하여, 보다 유연한 스타일링이 가능합니다.
:where() 기본 문법
:where(selector1, selector2, ...) {
property: value;
}
예제
:where(h1, h2, h3) {
color: blue;
}
위 코드에서는 h1, h2, h3 요소에 대해 글자 색상을 파란색으로 지정합니다. 하지만 이 스타일보다 더 높은 우선순위를 가진 스타일이 있다면 그 스타일이 적용됩니다.
2. :where()와 :is()의 차이점
:is()와 :where()는 문법이 거의 동일하지만, **우선순위(CSS Specificity)**에 차이가 있습니다.
:is()는 내부 선택자의 가장 높은 우선순위를 유지합니다.:where()는 항상 우선순위가 0입니다.
비교 예제
/* :is() 사용 */
:is(article h1, article h2) {
color: red;
}
/* :where() 사용 */
:where(article h1, article h2) {
color: blue;
}
위 코드에서 article h1과 article h2가 있을 때, 만약 h1 { color: black; } 스타일이 적용되어 있다면 :is()는 이를 덮어쓰지만, :where()는 덮어쓰지 못합니다.
3. :where()와 비슷한 다른 가상 선택자들
(1) :is() 선택자
- 특정 선택자 중 하나라도 해당하는 경우 스타일 적용
- 우선순위가 유지됨
:is(div, p, span) {
font-weight: bold;
}
(2) :not() 선택자
- 특정 선택자 제외
- 우선순위는 유지됨
:not(.no-style) {
text-decoration: underline;
}
(3) :has() 선택자 (CSS4 지원 브라우저에서 사용 가능)
- 특정 요소가 특정 하위 요소를 포함하는지 여부를 확인
div:has(img) {
border: 2px solid green;
}
4. :where()를 활용한 실용적인 예제
(1) 유연한 기본 스타일 적용
:where(p, ul, ol) {
margin-bottom: 1rem;
}
- 기본적으로
p,ul,ol요소 간의 간격을 조정하지만, 개별 스타일이 있으면 쉽게 덮어쓸 수 있음
(2) 폼 요소 스타일링
:where(input, textarea, select) {
font-size: 16px;
padding: 8px;
}
- 기본적으로 모든 폼 요소에 동일한 스타일 적용 가능
(3) 리셋 스타일 적용 시 활용
:where(*, *::before, *::after) {
box-sizing: border-box;
margin: 0;
padding: 0;
}
- 모든 요소에 기본적인 박스 모델 및 여백 초기화 적용
5. 마무리
:where() 가상 선택자는 기존 CSS 선택자를 더 유연하게 사용할 수 있도록 도와주는 강력한 기능입니다. 특히, 특정 요소에 대한 기본 스타일을 설정하되 다른 스타일과의 충돌을 피하고 싶을 때 유용하게 사용할 수 있습니다.
:where()를 적절히 활용하면 CSS의 유지보수성을 높이고 코드의 가독성을 향상시킬 수 있으므로, 적극적으로 활용해 보세요!