CSS :has() 상위 선택자

:has() 관계형 의사 클래스는 공식적으로 상위 선택자로 인식되며 실제 사양 [ Selectors Level 4 ]에서는 "forgiving-relative-selector-list "을 허용하는 상대 선택자로 설명됩니다. 그러나 :has()는 선택자에 관한 한 매우 유능하며 more than은 단지 상위 선택자일 뿐이라는 많은 증거가 있습니다.

통사론

:has() 의사 클래스의 구문은 의미 체계가 매우 명확하고 렌더링 프리젠테이션과 일치하기 때문에 상대적으로 간단하고 배우기 쉽습니다. -그래서 선택기.

간단한 예로 다음 함수는 요소에 <a> 요소 안에 <img> 요소가 있으면 <a> 요소가 일치한다는 것을 의미합니다.

a:has(img) { 
  display: block; 
}

이 선택기를 사용하여 텍스트 링크인지 이미지 링크인지 쉽게 구분하고 다른 CSS 스타일을 설정할 수 있습니다.
:has() 의사 클래스는 모든 CSS 선택기를 지원합니다. 예:

a:has(> img) { 
display: block; 
}

위의 함수는 일치하는 자식 요소가 a 요소인 img 요소가 일치되고 더 멀리 관련된 하위 요소는 고려되지 않음을 나타냅니다.

위의 코드에서 :has 의사 클래스 인수인 > 선택자는 a:has(a > img)가 아니라 인수의 맨 위에 직접 작성됩니다. :has() 의사 클래스는 인수 맨 위에 보이지 않는 :scope 의사 클래스가 있으므로 a:has(a > img) 작성이 금지됩니다.

마찬가지로 + 또는 ~와 같은 선택기를 사용하여 "앞 형제 선택기"의 효과를 얻을 수 있습니다. 여기서 앞 요소는 뒤 형제 요소를 기반으로 선택됩니다. 이렇게:

h3:has(+ p) { 
font-size: 1.5rem; 
}

위의 쿼리는 h3 요소 다음에 p 요소가 일치함을 나타냅니다. :has() 의사 클래스는 복합 선택기 및 선택기 목록도 지원합니다. 예:

article:has(h3, p) { 
   background-color: #f3f3f3;
}

위의 쿼리는 기사 요소 내의 h3 요소 또는 p 요소만 with 관계가 아닌 or 관계로 일치함을 나타냅니다.

예를 들어 h3 요소와 p 요소가 모두 일치하도록 관계를 설정하려면 다음과 같이 작성할 수 있습니다.

article:has(h3):has(p) { 
   background-color: #f3f3f3; 
}

:has() 의사 클래스는 :checked , :enabled 등과 같은 다른 의사 클래스 또는 :not 와 같은 다른 논리적 의사 클래스와도 혼합될 수 있습니다. 예:

section:not(:has(h3)) {
  border: 1px solid yellow;
}

section:has(:not(h3)) {
  color: orange;
}

위의 두 쿼리는 의미가 다릅니다.

전자 선택자는 section 요소를 포함하지 않는 h3 요소에 노란색 테두리가 있음을 의미하고, 후자는 section 요소가 아닌 요소를 포함하는 h3 요소가 주황색임을 의미합니다.

솔직히 모두에게 혼란 스럽습니다. 그러나 not -> has가 not을 의미한다는 것을 이해하면 더 쉬워집니다.

예

:has() 가상 클래스는 현재 꽤 오랫동안(브라우저 플래그 아래 또는 폴리필과 함께) 사용할 수 있었으며 이 부모 선택자가 수행할 수 있는 작업의 가능성은 시간이 지남에 따라 밝혀져야 합니다.

그동안 이 섹션에서는 :has()가 이미 활용되고 있는 창의적인 방법의 예를 다룹니다.

#1: 존재하는 경우에만 스타일링figcaption


펜 보기:has() Demo #1 — Figure variations by Jen Simmons( @jensimmons )

#2: 순수 CSS에서 크기 및 간격 효과가 있는 회전 갤러리



Kevin( :has() example four )의 펜@kevinpowell 보기

#3: 기본 색상 테마 스위처 만들기



Ahmad Shadeed( CSS :has - Color theme )의 펜@shadeed 참조

브라우저 지원