[CSS] :has() 선택자

:has()

최근에 추가된 관계형 의사 클래스로
부모 요소가 특정 하위 요소를 가지고 있을 경우 사용하는 선택자입니다.
javascript를 사용하지 않고 특정 하위 요소 포함 여부에 따라 요소를 선택할 수 있어 편리합니다.

Q. 의사 클래스(pseudo-class)가 뭔가용? 🤔
CSS 의사 클래스는 선택한 요소의 특수한 상태를 지정할 때 사용합니다.
간단히 예를 들면 :hover :active :focus :not()등이 있습니다.
자세히는 MDN을 참고해주세요~
(MDN 참고 링크) 👉 https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

1. 사용법

괄호 안에 포함 여부를 확인할 특정 하위 요소를 넣어줍니다.
매개변수로 자식, 형제, 클래스 등 선택자를 넣어 다양하게 사용이 가능합니다.

div:has(h1) {
	background-color: tomato;
}
// div 안에 h1이 포함되어 있으면 배경색을 tomato로 적용

예시 1. 형제 선택자

div:has(+ p) {
	background-color: tomato;
}
// div가 형제로 p를 가지고 있으면 배경색을 tomato로 적용

예시 2. 특정 class 선택자

div:has(.child) {
	background-color: tomato;
}
// div가 child라는 class를 가진 하위 요소를 가지고 있으면 배경색을 tomato로 적용

예시 3. :not() 선택자 결합

div:not(:has(span)) {
	background-color: tomato;
}
// div가 span을 가지고 있지 않으면 배경색을 tomato로 적용

2. 지원 브라우저

파이어폭스를 제외하고 대부분의 최신 브라우저에서 지원합니다.

지원 브라우저 확인하기 👉 https://caniuse.com/?search=has