최근 주요 브라우저에서 :has() 선택자가 안정적으로 지원되면서, 기존에는 자바스크립트로만 가능했던 “부모 요소가 자식의 상태에 따라 스타일을 바꾸는 기능”을 CSS만으로 구현할 수 있게 되었습니다.

이 기능을 활용하면 토글 메뉴, 아코디언, 폼 검증 UI, 선택 상태 표시 등 많은 UI 상호작용을 JS 없이도 처리할 수 있어 퍼블리싱 구조가 훨씬 간결해지고 유지보수 난이도도 크게 줄어듭니다.

 

예를 들어 부모 .item 안에 있는 체크박스가 선택되었을 때 .item 자체에 스타일을 줄 수 있으며, 다음과 같이 구현합니다.

 

.item:has(input:checked) {
  background:#f5f5f5;
  border-color:#333;
}
 

이렇게 하면 체크박스·라디오·input 상태에 따라 부모 컨테이너의 스타일이 즉시 바뀌어, JS 없이도 다양한 상호작용 UI를 표현할 수 있습니다.

현대적인 UI 컴포넌트 제작에서 :has()는 필수 기술로 자리잡고 있으며, 앞으로 더 많은 인터랙션을 CSS만으로 처리하는 트렌드를 이끌고 있습니다.