CSS :has() 선택자 – 부모 요소를 조건부로 스타일링하기

글쓴이 FinBapa / 2025년 09월 02일

:has() 선택자는 CSS에서 드디어 부모 요소를 자식 요소 기준으로 스타일링할 수 있는 기능을 제공합니다. jQuery에서 자주 쓰이던 기능이 이제 표준 CSS에서 가능해져, 불필요한 JavaScript를 줄일 수 있습니다.

목차

예제 코드

/* input 안에 체크박스가 있으면 배경 강조 */
form:has(input[type="checkbox"]:checked) {
  background-color: #f0f9ff;
  border: 2px solid #38bdf8;
  padding: 1rem;
}

/* 카드 안에 이미지가 없는 경우 대체 스타일 적용 */
.card:not(:has(img)) {
  background-color: #fafafa;
  color: #777;
  font-style: italic;
}

/* input 안에 체크박스가 있으면 배경 강조 */
form:has(input[type="checkbox"]:checked) {
  background-color: #f0f9ff;
  border: 2px solid #38bdf8;
  padding: 1rem;
}

/* 카드 안에 이미지가 없는 경우 대체 스타일 적용 */
.card:not(:has(img)) {
  background-color: #fafafa;
  color: #777;
  font-style: italic;
}

CSS

예제 실행 결과

이미지 없음

설명

조건부 스타일링 가능 → 예: 특정 input이 체크되었을 때 부모 박스 색상 변경.
자바스크립트 코드 대체 → DOM 탐색·클래스 토글 대신 CSS만으로 구현.
지원 브라우저: 최신 Chrome, Safari, Edge 등. (단, 구형 브라우저는 미지원)

실무 TIP

:has()는 부모 선택자처럼 동작하므로, 상태 기반 스타일링에 유용합니다.
구형 브라우저 호환성이 필요하다면, 자바스크립트 fallback도 고려하세요.

마무리

CSS :has()는 그동안 “부모 선택자”가 없어서 불편했던 부분을 크게 개선해줍니다. 앞으로 더 널리 지원될수록, UI 개발에서 JavaScript 의존도를 낮출 수 있을 것입니다.

Summary in English

The CSS :has() selector allows developers to style parent elements based on their children, reducing the need for JavaScript. It makes conditional styling simpler and more powerful for modern responsive UI design.

관련 포스팅들