CSS 최신 선택자 ✅ :has() 활용법과 실무 예제

 

 

:has()는 흔히 **“부모 선택자”**로 불리며, CSS에서 드디어 상위 요소를 조건부로 스타일링할 수 있게 해줍니다.
기존에는 순수 CSS만으로 불가능했던 패턴을 해결해주는 강력한 기능입니다.

---

📌 1. 기본 문법

 

A:has(B) { ... }

 

👉 A 요소가 B를 포함하고 있다면 스타일 적용

---

📌 2. 폼 검증 스타일링

 

/* input이 비어있으면 빨간 테두리 */
form:has(input:invalid) {
  border: 2px solid red;
}

 

📌 기존에는 JS로 처리해야 했던 폼 상태 스타일링이 가능

---

📌 3. 드롭다운 메뉴 제어

 

.dropdown:has(:hover) .menu {
  display: block;
}

 

📌 부모에 :hover가 있으면 자식 메뉴 표시

---

📌 4. 카드 UI – 버튼 존재 여부 스타일링

 

.card:has(button) {
  border: 2px solid green;
}

 

📌 카드 안에 버튼이 있으면 강조 표시 가능

---

📌 5. 체크박스 토글 UI

 

/* 체크된 상태일 때 라벨 색상 변경 */
label:has(input[type="checkbox"]:checked) {
  background: lightblue;
}

 

📌 :checked 상태에 따라 부모 라벨 스타일 변경

---

⚡ 6. 실무 활용 팁

• ✅ 폼 상태 스타일링 (에러/유효성 체크)
• ✅ 드롭다운/토글 UI를 CSS만으로 구현
• ✅ 조건부 스타일 적용 시 유용
• ❌ 너무 복잡한 선택자는 성능 저하 가능 → 꼭 필요한 곳에만 사용

---

📝 마무리 정리

• :has() = CSS에서 사실상 부모 선택자 역할
• JS 없이도 조건부 스타일링 가능 → 코드 간결화
• 점점 더 많은 프로젝트에서 사용될 핵심 기능