CSS :has() 선택자 — 부모 선택의 혁명

:has() 선택자란

CSS에서 오랫동안 불가능했던 "부모 선택"이 가능해졌습니다.

실전 예제

/* 이미지가 있는 카드만 레이아웃 변경 */
.card:has(img) {
  display: grid;
  grid-template-columns: 200px 1fr;
}

/* 유효하지 않은 입력이 있는 폼 강조 */
form:has(:invalid) {
  border-color: red;
}

/* 체크된 체크박스의 형제 요소 스타일 */
.todo-item:has(input:checked) .text {
  text-decoration: line-through;
  opacity: 0.5;
}

브라우저 지원

2024년부터 모든 주요 브라우저에서 지원합니다.