CSS에서 :has() 선택자는 부모 요소가 특정 자식 요소를 포함하고 있는지를 확인할 때 유용한 가상 선택자입니다. 이를 활용하면 기존 CSS만으로는 어렵던 스타일링을 보다 쉽게 적용할 수 있습니다. 이번 글에서는 :has() 선택자의 개념과 활용법을 자세히 알아보겠습니다.
1. :has() 가상 선택자란?
:has() 선택자는 특정 요소가 특정 자식 요소를 포함하고 있는지 확인하여 스타일을 적용할 수 있도록 합니다. 보통 CSS는 부모 요소가 자식 요소를 선택하는 방식으로 동작하지만, :has()를 사용하면 반대로 자식을 기준으로 부모 요소를 선택하는 것이 가능합니다.
:has() 기본 문법
selector:has(child-selector) {
property: value;
}
예제
div:has(p) {
border: 2px solid blue;
}
위 코드에서는 p 요소를 포함한 모든 div 요소에 파란색 테두리가 적용됩니다.
2. :has()의 주요 기능
- 부모 요소 스타일 변경: 특정 자식 요소를 포함하는 부모에게 스타일을 적용할 수 있습니다.
- 동적 스타일링 가능: 특정 요소가 존재할 때와 존재하지 않을 때의 스타일을 구분할 수 있습니다.
- 자바스크립트 없이 인터랙티브한 디자인 가능: 기존 CSS만으로도 UI를 동적으로 스타일링할 수 있습니다.
3. :has() 활용 예제
(1) 특정 자식을 포함하는 부모 요소 스타일링
article:has(img) {
background-color: #f4f4f4;
padding: 20px;
}
img요소를 포함한article요소에 배경색과 패딩을 적용합니다.
(2) 특정 자식 요소가 있을 때만 부모 요소 강조
.card:has(.featured) {
border: 3px solid red;
}
.featured클래스를 포함하는.card요소에 빨간색 테두리를 적용합니다.
(3) 폼 검증 스타일 적용
form:has(input:invalid) {
border: 2px solid red;
}
- 유효하지 않은
input필드를 포함한form요소에 빨간색 테두리를 적용합니다.
(4) 네비게이션 메뉴에서 활성 링크가 있는 경우 스타일 변경
nav:has(a.active) {
background-color: #333;
}
a.active클래스를 포함한nav요소에 배경색을 변경하여 강조합니다.
(5) 체크박스가 선택되었을 때 관련 컨테이너 스타일 변경
div:has(input[type="checkbox"]:checked) {
background-color: lightgreen;
}
input[type="checkbox"]가 체크된 경우 해당div의 배경색을 연두색으로 변경합니다.
See the Pen Untitled by Juyeon (@Juyeon) on CodePen.
4. :has() 사용 시 주의할 점
- 브라우저 호환성
:has()는 최신 브라우저에서만 지원되므로, 구형 브라우저에서는 사용할 수 없습니다. Can I use에서 지원 여부를 확인하세요.
- 성능 고려
:has()는 강력하지만 성능 비용이 높을 수 있습니다. 특히 많은 요소를 검사해야 하는 경우 주의가 필요합니다.
5. 마무리
:has() 선택자는 부모 요소를 동적으로 스타일링할 수 있도록 해주는 강력한 기능입니다. 기존 CSS만으로 해결하기 어려웠던 스타일링을 보다 쉽게 구현할 수 있으며, 자바스크립트를 사용하지 않고도 반응형 디자인을 적용할 수 있습니다.
이제 :has()를 활용하여 더욱 유연하고 직관적인 스타일링을 적용해 보세요!