새로운 :has 의사 클래스를 CSS 상위 선택자로 사용

소개

최신 브라우저는 support :has 의사 클래스로 시작했습니다. Safari는 2022년 3월부터 이를 지원하고 Chrome은 이를 지원하는 새 버전을 2022년 8월에 출시했습니다. Firefox에서는 layout.css.has-selector.enabled 플래그를 활성화하는 데 사용할 수 있습니다.
:has() 의사 클래스 선택기를 상위 선택기로 사용할 수 있습니다. 상대 선택자 목록을 인수로 받아들이기 때문에 매우 강력합니다. 따라서 가능성은 무한합니다.

예시

:has 의사 클래스를 사용하는 방법에 대한 몇 가지 예를 살펴보겠습니다. 다음과 같은 html 구조가 있습니다.

<div>
  <div>
    <img src="ocean.jpeg" />
    <p>Image description.</p>
  </div>
  <div>
    <img src="html.jpg" />
  </div>
</div>

두 개의 이미지가 있습니다. 하나는 설명이 있고 다른 하나는 설명이 없습니다.

먼저 설명이 있는 이미지가 포함된 div 요소를 선택합니다. 이를 위해 다음과 같이 하위 선택기>를 사용할 수 있습니다: div:has(> p) . 우리의 예에서는 이것으로 충분하지만 자식 선택자와 인접한 형제 선택자+를 다음과 같이 결합하는 것과 같은 보다 구체적인 작업을 수행할 수 있습니다. div:has(> img + p) .

div:has(> p)는 단락이 포함된 div 요소를 선택합니다.

div:has(> img + p)는 이미지와 단락이 포함된 div 요소를 선택합니다.

예제에서는 둘 다 사용할 수 있습니다.

div:has(> p) {
  border: 2px solid #000;
  border-radius: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

이제 설명이 있는 이미지의 여백을 제거하고 테두리 반경을 지정합니다.

img:has(+ p) {
  margin: 0;
  border-radius: 5%;
}

마지막으로 설명 없이 이미지에 테두리 반경을 지정합니다. 이를 위해 :not() 의사 클래스를 사용할 것입니다.

img:not(:has(+ p))는 p 요소가 없는 img 요소를 인접한 형제로 선택합니다.

img:not(:has(+ p)) {
  border-radius: 50%;
}

이것이 최종 결과입니다.



this page 의 하단에 렌더링된 HTML도 볼 수 있습니다. :has 가상 클래스를 이미 지원하는 브라우저를 사용하는 경우에만 결과가 표시된다는 점을 기억하십시오.

자원

Browser support

:has() documentation - mdn web docs