CSS :has() 선택자는 “부모 선택자"로 불리며, 특정 자식을 포함한 요소를 선택할 수 있다.

1
2
3
4
5
6
7
8
9

/* 이미지를 포함한 카드만 스타일링 */
.card:has(img) {
    grid-column: span 2;
}

/* 체크된 체크박스의 부모 라벨 */
label:has(input:checked) {
    color: var(--accent);
}

JavaScript 없이도 상태 기반 스타일링이 가능해진다. 모든 주요 브라우저에서 지원되므로 프로덕션에서 사용 가능.