🔍
:has() 셀렉터
자식 조건으로 부모/형제를 선택
CSS에서는 오랫동안 부모 셀렉터가 불가능했습니다. :has()의 등장으로 자식 요소의 존재 여부나 상태를 기반으로 부모 요소를 스타일링할 수 있게 되었습니다. 이는 JavaScript 없이도 복잡한 상태 기반 UI를 구현할 수 있다는 것을 의미합니다.
예를 들어 form:has(input:invalid)로 유효하지 않은 입력이 있는 폼 전체를 강조하거나, .card:has(img)로 이미지가 있는 카드만 다른 레이아웃을 적용할 수 있습니다.
적용 방법
1
부모:has(자식조건) 형태로 셀렉터를 작성한다
2
:has() 안에 다른 의사 클래스(:checked, :focus, :invalid 등)를 조합한다
3
형제 결합자(+ 또는 ~)와 함께 사용하여 형제 기반 선택도 구현한다
4
JavaScript로 구현했던 상태 기반 스타일링을 :has()로 교체한다
장점
- ✓ JavaScript 없이 상태 기반 스타일링이 가능해진다
- ✓ CSS만으로 복잡한 조건부 디자인을 구현할 수 있다
단점
- ✗ 복잡한 :has() 셀렉터는 성능에 영향을 줄 수 있다
- ✗ 셀렉터가 길어지면 가독성이 떨어질 수 있다
사용 사례
체크박스 상태에 따라 카드 스타일을 변경하는 인터랙티브 UI
필수 입력 필드가 비어있을 때 폼 전체를 강조 표시