:has()란?
오랫동안 CSS는 자식 기반으로 부모를 고르지 못했다. :has()가 이를 해결했다.
예
/* 체크된 input이 있는 label */
label:has(input:checked) { font-weight: bold; }
/* 이미지 있는 article */
article:has(img) { padding: 20px; }
/* 에러 input 포함한 폼 */
form:has(input:invalid) .submit { opacity: 0.5; }의의
JS 없이 상위 요소 상태 기반 스타일링이 가능. "부모 선택자"를 수년간 요구했던 개발자들에게 큰 변화.
지원
모든 주요 브라우저(2023년 말~). 즉시 실무 사용 가능.