CSS에서 하위 요소 조건에 따른 요소 선택 :has() 선택자

CSS를 코딩하다보면 특정 요소의 부모요소에 스타일을 적용해야 할 경우가 있다. 이전 까지는 JavaScript로 특정 요소의 부모요소에 class를 추가 한다던지 복잡한 CSS 선택자를 사용해야 했으나 CSS Level 4의 새로운 선택자 :has()가 추가 됨으로써 보다 쉽게 적용이 가능해졌다.

개요 및 구문

:has() 선택자는 상대적으로 새로운 CSS 선택자로 하위 요소에 따라 요소를 선택할 수 있다. 복잡한 CSS 선택자 또는 JavaScript를 사용하지 않고도 특정 하위 요소를 포함하는지 여부에 따라 요소를 선택할 수 있다.

:has() 선택자의 구문은 다음과 같다.

selector:has(sub-selector) {
  /* CSS rules */
}

여기서 selector는 유효한 CSS 선택자이고 sub-selector는 원하는 하위 요소와 일치하는 유효한 CSS 선택자이다. :has() 선택자는 하위 선택자와 일치하는 하나 이상의 자손을 포함하는 모든 요소와 일치한다.

사용 예제

다음은 :has() 선택자를 사용하여 중첩된 <ul> 요소를 포함하는 모든 <li> 요소를 선택하는 예이다.

li:has(ul) {
  background-color: yellow;
}

이 예에서 중첩된 <ul> 요소를 포함하는 모든 <li> 요소는 노란색 배경색이 적용된다.

다양한 응용

다음은 CSS에서 :has() 선택자를 사용하는 몇 가지 예이다.

하위 요소의 속성을 기반으로 상위 요소 선택

div:has(p[title="important"]) {
  border: 2px solid red;
}

이 코드는 속성이 title="important"인 <p> 요소를 포함하는 모든 <div> 요소를 선택한다. 선택한 <div> 요소에는 빨간색 테두리가 적용된다.

부모 요소에 마우스 오버시, 자식 요소가 있으면 배경 색상 변경

.parent:hover:has(.child) {
  background-color: blue;
}

이 코드는 부모 요소에 마우스 오버시, 해당 부모 요소에 하위에 .child 클래스를 가진 요소가 있는 경우, 해당 부모 요소의 배경색상을 파란색으로 변경한다.

같은 부모 요소 내에서 다른 자식 요소를 선택

.parent:has(.child-1) .child-2 {
  color: red;
}

이 코드는 부모 요소에 .child-1 클래스를 가진 요소가 있는 경우, 같은 부모 요소 내에서 .child-2 클래스를 가진 요소의 글자색상을 빨간색으로 변경한다.

중첩 사용으로 요소 선택

.parent:has(> .child-1:has(.child-2)) {
  background-color: yellow;
}

이 코드는 .parent 요소 중에서, 직계 자식 요소 중 .child-1 클래스를 가진 요소 중에서, .child-2 클래스를 가진 요소가 있는 경우, 해당 .parent 요소의 배경색상을 노란색으로 변경한다.

:not() 선택자와 결합

:has() 선택자를 다른 CSS 선택자와 결합하여 더 복잡한 선택자를 만들 수 있다는 점은 주목할 가치가 있다. 예를 들어 :has() 선택자를 :not() 선택자와 함께 사용하여 특정 자손 요소를 포함하지 않는 요소를 선택할 수 있다.

.parent:not(:has(.child)) {
  background-color: orange;
}

이 코드는 .child 요소를 포함하지 않는 모든 .parent 요소의 배경색상을 오렌지색으로 변경한다.

브라우저 호환성

현재 2023년 3월 기준으로 CSS :has() 선택자는 대부분의 최신 브라우저에서 실험적으로 지원되는 기능이다.

그러나 :has() 선택자는 아직 CSS 명세의 일부가 아니며, 최종 권장 사항이 아니기 때문에 모든 브라우저에서 호환되지는 않는다.

현재 :has() 선택자를 지원하는 브라우저는 다음과 같다.

• Chrome 105 이상
• Edge 105 이상
• Safari 15.4 이상
• Firefox 103 이상 (layout.css.has-selector.enabled 활성화 필요)

하지만 이 기능은 실험적인 것으로 여전히 변경될 가능성이 있으며, 이전 버전의 브라우저에서는 작동하지 않을 수 있다. 또한, :has() 선택자는 모든 경우에 대해 최적의 선택자가 아닐 수 있으므로, 대안적인 방법을 고려하는 것이 좋다.