:has() 관계형 의사 클래스

:has() 의사 클래스는 인수와 일치하는 자손을 포함한 요소를 선택합니다. 흔히 "부모 선택자"라고 부르며, 자식 요소를 기준으로 부모 요소의 스타일을 지정할 수 있게 합니다. CSS에 이전에는 없던 기능입니다.

.card:has(img)는 img 자손을 포함하는 모든 .card 요소를 선택합니다. 인수는 상대 선택자 목록이며, 대상 요소를 기준으로 요소를 설명하는 유효한 CSS 선택자라면 무엇이든 사용할 수 있습니다.

유효하지 않은 입력을 포함한 폼 컨테이너의 스타일을 지정할 수 있습니다. form:has(:invalid) { border-color: red; }처럼 작성하십시오. 제목을 포함한 섹션의 스타일은 section:has(h2) { padding-top: 2rem; }처럼 지정할 수 있습니다. 이렇게 하면 자식 요소의 상태에 따라 부모 요소의 모양이 바뀝니다.

:has()는 +와 ~로는 할 수 없는 이전 형제 요소 선택을 가능하게 합니다. h2:has(+ p)는 바로 뒤에 p가 오는 h2 요소를 선택합니다. li:has(~ .active)는 뒤에 .active 형제가 있는 li 요소를 선택합니다.

JavaScript 없이 브라우저 기본 폼 유효성에 반응할 수 있습니다. input:has(~ .error-msg)는 형제 오류 메시지가 있는 입력의 스타일을 지정합니다. label:has(+ input:required)는 연결된 입력이 필수인 레이블의 스타일을 지정합니다. 이 모든 작업을 CSS만으로 수행할 수 있습니다.

활성화된 자식 요소를 기준으로 탐색 컨테이너를 강조할 수 있습니다. nav:has(.active)는 자식 중 하나가 활성 클래스일 때 전체 nav에 스타일을 적용합니다. 컨테이너 수준에서 현재 탐색 섹션을 표시할 때 유용합니다.

.grid:has(.card:focus-within)은 카드 중 하나가 키보드 포커스를 받으면 전체 그리드의 스타일을 지정합니다. .dropdown:has(:hover)는 자손 요소 중 하나에 마우스를 올리는 동안 드롭다운을 열린 상태로 유지하므로 복잡한 형제 결합자 연결보다 깔끔합니다.

.sidebar:has(nav)는 .sidebar:not(:has(nav))와 다른 레이아웃을 적용합니다. JavaScript 없이 조건부 레이아웃을 구현할 수 있습니다. 특정 자식 요소의 존재 여부가 부모 요소의 레이아웃을 결정하므로 진정으로 적응형이며 콘텐츠를 인식하는 CSS를 만들 수 있습니다.

인수를 광범위하게 선택하는 :has(*)와 같은 :has() 사용은 비용이 클 수 있습니다. 브라우저가 모든 요소를 확인해야 하기 때문입니다. :has()의 인수는 구체적으로 작성하십시오. 가능하면 :has(.specific-child)(모든 자손)보다 :has(> .specific-child)(직접 자식)를 우선하십시오.

:has()는 Chrome 105 이상, Safari 15.4 이상, Firefox 121 이상에서 지원됩니다. 2023년 말부터 전체 기준 지원이 제공되었습니다. 폴리필은 존재하지 않습니다(JavaScript로 시뮬레이션해야 하기 때문입니다). 이 기능이 중요하지 않은 이전 브라우저에서는 점진적 향상 방식으로 사용하십시오.

이전에는 JS 이벤트 수신기가 필요했던 패턴을 생각해 보십시오. 「자식 요소가 포커스를 받으면 부모 요소에 클래스 추가」, 「모달 트리거가 있으면 오버레이 표시」, 「항목이 정확히 세 개일 때 그리드의 스타일 변경」과 같은 작업을 :has()로 모두 선언적으로 처리할 수 있습니다.

:has()는 +와 ~ 같은 기존 CSS 결합자와 비교했을 때 무엇이 독특한가요?

:has()는 부모 요소와 이전 형제 요소를 선택할 수 있게 하는 CSS 최초의 진정한 관계형 의사 클래스입니다. 콘텐츠 기반 스타일 지정, 폼 상태에 대한 반응, 탐색 강조 표시, 그리고 이전에는 JavaScript를 사용한 DOM 조작이 필요했던 여러 패턴을 모두 CSS에서 선언적으로 구현할 수 있게 합니다.