CSS :has() 페시픽

정의와 사용 방법

CSS :has() 페시픽은 특정 형제 요소나 내용을 포함하는 모든 부모 요소를 매칭합니다.

사용 예시:

• 특정 형제 요소나 내용을 숨기거나 표시합니다
• 특정 내용이 있으면 레이아웃을 변경합니다
• 부모 요소가 특정 형태의 형제 요소나 내용을 가지고 있다면, 그 외관을 다르게 합니다

실례

예제 1

<p> 요소 뒤에紧接着의 <h2> 요소의 스타일을 설정합니다：

h2:has(+ p) {
  color: gray;
  background-color: gold;
  border: 2px dotted red;
}

직접 시험해 보세요

예제 2

<h1> 요소를 포함하는 <section> 요소와 클래스 이름이 funfact인 요소를 포함하는 <section> 요소의 스타일을 설정합니다：

section:has(h1) {
  background-color: gold;
}
section:has(.funfact) {
  color: blue;
}

직접 시험해 보세요

예제 3

선택된 <input> 요소를 포함하는 <li> 요소( <ul> 내에서)의 스타일을 설정합니다：

ul li:has(input:checked) {
  border:2px solid maroon;
}

직접 시험해 보세요

CSS 문법

:has(relative-selector-list) {
  css 선언;
}

기술 세부 사항

브라우저 지원

표中之 숫자는 이 퍼시픽 클래스를 최초로 지원하는 브라우저 버전을 지정합니다.