CSS :has() 선택자는 "안에 이런 요소가 있는 부모"를 고를 수 있게 해 주는 선택자입니다. 체크박스가 체크되면 감싼 박스 색을 바꾸거나, 사진이 있는 카드만 레이아웃을 다르게 잡는 일을 자바스크립트 없이 CSS만으로 처리할 수 있습니다.
예전에는 클래스 하나 붙이자고 스크립트를 따로 짰던 부분들이라, 알아 두면 유지보수가 꽤 편해집니다.

1. 사진이 있는 카드와 없는 카드를 다르게

게시판 목록이나 공지 카드를 만들다 보면 관리자가 사진을 넣기도 하고 안 넣기도 합니다. 예전에는 has-thumb 같은 클래스를 서버에서 따로 붙여야 했는데, 이제는 아래 한 블록이면 됩니다.

/* 이미지가 들어 있는 카드만 2열로 */
.card:has(img) {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 16px;
}

/* 이미지가 없는 카드는 기본 1열 그대로 */

2. 동의 체크박스, 체크되면 박스 전체가 반응하게

문의 폼 하단의 개인정보 동의 영역은 체크 여부가 눈에 잘 안 띄어서 "전송이 안 돼요" 문의가 자주 들어옵니다. :has(input:checked)로 감싼 박스 전체 색을 바꿔 주면 체크 상태가 한눈에 보입니다.

<label class="agree">
  <input type="checkbox" name="privacy">
  개인정보 수집·이용에 동의합니다
</label>

/* 체크되면 박스 전체 테두리 색 변경 */
.agree:has(input:checked) {
  border-color: #cc2b2b;
  background: #fff5f5;
}

3. 입력 오류가 난 칸만 테두리 강조

:user-invalid는 사용자가 값을 입력하고 넘어간 뒤에만 오류로 판단하기 때문에, 페이지에 들어오자마자 빨간 칸이 뜨는 문제가 없습니다. 이 둘을 같이 쓰면 칸 테두리와 안내 문구를 한 번에 제어할 수 있습니다.

/* 입력값이 형식에 안 맞을 때 감싼 칸 강조 */
.field:has(input:user-invalid) {
  border-color: #d93025;
}
.field:has(input:user-invalid) .hint {
  display: block;   /* 안내 문구 보이기 */
}

4. 주의할 점

요즘 쓰는 브라우저는 대부분 지원하지만, 오래된 아이폰을 업데이트하지 않은 방문자도 있습니다. 그래서 :has()는 꾸밈을 더하는 용도로 쓰고, 이게 안 먹혀도 폼 전송이나 메뉴 열기 같은 기능은 그대로 되도록 짜는 게 안전합니다. 꼭 구분이 필요하면 @supports로 감싸 두세요.

/* 지원하지 않는 브라우저는 그냥 기본 모양 */
@supports selector(:has(*)) {
  .agree:has(input:checked) {
    border-color: #cc2b2b;
  }
}

또 body:has(...)처럼 아주 넓은 범위에 걸면 페이지가 바뀔 때마다 브라우저가 다시 계산할 일이 많아집니다. 가능하면 카드나 폼 칸처럼 가까운 부모에 거는 편이 좋습니다.