CSS :has() 선택자 활용법

:has()는 자식/후속 요소의 조건으로 부모를 선택하는 CSS 선택자입니다 ("부모 선택자").

/* 이미지가 있는 카드만 스타일 */
.card:has(img) {
  grid-column: span 2;
}

/* 체크된 체크박스를 가진 라벨 */
label:has(input:checked) {
  color: green;
  font-weight: bold;
}

/* 빈 입력 필드를 가진 폼 */
form:has(input:invalid) .submit-btn {
  opacity: 0.5;
  pointer-events: none;
}

/* 특정 요소가 없을 때 */
.list:not(:has(.item)) {
  display: none; /* 아이템이 없으면 숨기기 */
}

2025년 기준 모든 주요 브라우저 지원. JavaScript 없이도 동적인 스타일링이 가능합니다.