JS 없이, 부모를 바꿉니다.

제가 프런트엔드를 처음 배울 때 가장 답답했던 게 이거였습니다. 카드 안에 체크박스가 있고, 체크하면 카드 전체에 테두리를 두르고 싶다. 그런데 CSS로는 안 됐어요. 선택자가 부모에서 자식으로만 내려갔거든요. 그래서 매번 change 이벤트를 달고, 부모를 찾아 올라가서 클래스를 붙였다 뗐다 했습니다. 작은 토글 하나에 자바스크립트 십수 줄이 붙었죠. :has()는 그 십수 줄을 CSS 한 줄로 돌려놨습니다.

그래서, 직접 눌러보세요

설명보다 빠릅니다. 아래 박스를 체크하면 무슨 일이 일어나는지 보세요. 자바스크립트는 단 한 줄도 없습니다.

그래서 :has()가 정확히 뭘 하는 건가요?

:has()는 “관계 선택자(relational selector)”입니다. 괄호 안에 적은 조건을 가지고 있는 요소를 고릅니다. 위 위젯의 규칙은 이렇게 생겼습니다.

.has-card:has(input:checked) { border-color: var(--signal); background: ...; }

해석하면 “input:checked를 가진 .has-card를 골라라”입니다. 체크박스는 카드의 자식인데, 그 자식의 상태가 부모인 카드를 바꿉니다. 예전엔 절대 못 하던 일이에요.

왜 이게 ‘부모 선택자’라고 불리나요?

오랫동안 개발자들이 가장 원했던 게 “부모 선택자”였습니다. 자식을 보고 부모를 고르는 기능이요. :has()는 그걸 포함합니다. 더 정확히는 방향이 자유로운 선택자라, 부모뿐 아니라 앞 형제도 고를 수 있습니다. 예를 들어 label:has(+ input:focus)는 “바로 뒤 input이 포커스된 label”을 고릅니다. 라벨이 input보다 앞에 있어도, 뒤 요소의 상태로 앞 요소를 꾸밀 수 있다는 뜻입니다.

제가 실무에서 실제로 쓰는 모양은 이렇게 짧습니다. 카드 선택과 폼 검증을 자바스크립트 없이 처리하는 핵심 규칙만 모아봤습니다.

/* 1) 카드 안 체크박스가 켜지면 부모 카드를 강조 */
.plan:has(input:checked){
  border-color: var(--signal);
  background: color-mix(in srgb, var(--signal) 8%, transparent);
}

/* 2) 값을 입력한 뒤 형식이 틀렸을 때만 라벨을 빨갛게 */
.field:has(input:invalid:not(:placeholder-shown)) label{ color: crimson; }

/* 3) 항목이 비었을 때만 안내 문구 보이기 */
.list:not(:has(li)) .empty-note{ display: block; }

/* 4) 지원 브라우저에서만 얹는 점진적 향상 */
@supports selector(:has(*)){
  .has-card:has(input:checked){ outline: 2px solid var(--signal); }
}

네 줄짜리 규칙이 예전엔 전부 이벤트 리스너와 클래스 토글로 채워야 했던 자리입니다.

실무에서 이걸 어디에 쓰나요?

1. 카드 선택 UI

요금제 카드, 옵션 선택처럼 “고른 항목을 강조”하는 화면. 라디오/체크를 카드 안에 넣고 .plan:has(input:checked)로 선택된 카드만 테두리·배경을 바꿉니다. 위 위젯이 바로 이 패턴입니다.

2. 폼 검증 표시

입력 전에는 조용히, 손댄 뒤 형식이 틀렸을 때만 빨간 표시. .field:has(input:invalid:not(:placeholder-shown)) label { color: crimson; } 한 줄이면 됩니다. “비었을 때부터 빨갛게 떠서 거슬리는” 흔한 실수를 자바스크립트 없이 피합니다. 이 얘기는 폼 검증 담당 글에서 더 깊이 다룹니다.

3. 메뉴·레이아웃 조건부

“드롭다운이 열려 있으면 헤더 배경을 어둡게”, “이미지가 있는 카드만 그리드를 2열로” 같은 조건부 레이아웃. nav:has(.menu[open]), .card:has(img)처럼 구조 자체를 조건으로 삼을 수 있습니다.

4. 빈 값 처리

.list:has(li)는 항목이 하나라도 있을 때만 적용됩니다. 반대로 .list:not(:has(li))로 “비었을 때만 안내 문구 보이기”를 만들 수 있어, 빈 상태(empty state)를 자바스크립트 없이 그립니다.

브라우저는 어디까지 지원하나요?

2023년이 분기점이었습니다. Safari와 Chrome/Edge가 먼저 기본 지원을 켰고, Firefox가 2023년 후반 121 버전에서 합류하면서 모든 주요 모던 브라우저의 안정 버전이 :has()를 지원하게 됐습니다. 즉 지금 최신 브라우저를 쓰는 사용자에게는 사실상 전부 동작합니다. 변수는 업데이트가 끊긴 구형 브라우저뿐입니다.

지원 안 되는 브라우저는 어떻게 하나요?

점진적 향상(progressive enhancement)으로 설계합니다. 핵심은 “:has()가 없어도 화면이 멀쩡히 작동해야 한다”입니다. 기본 상태를 먼저 만들고, :has() 규칙은 그 위에 얹는 ‘보너스’로 둡니다. 분기를 명시하고 싶으면 이렇게 감쌉니다.

@supports selector(:has(*)) { .has-card:has(input:checked) { ... } }

지원하는 브라우저는 더 나은 반응을 받고, 안 되는 브라우저는 깨지지 않은 기본 화면을 봅니다. 어느 쪽도 손해 보지 않는 구조입니다.

코드량과 유지보수, 진짜 차이가 큰가요?

큽니다. 자바스크립트로 부모를 토글하려면 보통 (1) 요소를 잡고, (2) 이벤트 리스너를 달고, (3) 부모를 거슬러 올라가 클래스를 붙였다 뗐다 하고, (4) 동적으로 추가된 요소까지 신경 써야 합니다. 이 네 단계가 전부 사라집니다. 상태가 DOM에 이미 있으면(체크·포커스·invalid·존재 여부) CSS가 알아서 읽습니다. 리스너가 없으니 메모리 누수·해제 누락 같은 버그도 원천적으로 줄어듭니다.

이런 디테일을 아는 사람이, 사이트 전체를 만듭니다

:has() 같은 도구는 “자바스크립트로 떡칠하지 않아도 되는 지점”을 알아보는 안목에서 나옵니다. 코드가 줄면 버그가 줄고, 사이트가 가벼워지고, 다음 사람이 고치기 쉬워집니다. Findable에서는 이런 판단이 기본값입니다.

다른 담당자와의 연결

이 노하우는 혼자 굴러가지 않습니다. 우리가 어떤 원칙으로 코드를 짜는지는 개발은 이렇게 합니다에서, :has()로 만드는 검증 UX의 디테일은 폼 검증 담당 글에서, 그리고 “왜 가벼운 코드가 결국 빠른 사이트인가”는 성능 담당 글에서 이어집니다.