[CSS 선택자] :has() 가상 선택자

📢 :has(선택자) 정의

해당 부모 선택자가 특정 자식 선택자를 가지고 있을 경우 적용 (CSS의 if문 형식)

(https://developer.mozilla.org/en-US/docs/Web/CSS/:has)

 

See the Pen Untitled by jominh (@thatBamm) on CodePen.

 

 

 

📢 :has() 와 :not() 조합

어떤 순서로 조합하냐에 따라 결과값이 달라진다.

 

See the Pen [CSS 선택자] :has() , :not() 조합 by jominh (@thatBamm) on CodePen.

 

 

 

📢 브라우저 호환성

2023.06.08 기준 Firefox 계열에서 지원하지 않는다.

 

출처 : https://caniuse.com/?search=%3Ahas()