조건에 맞는 자식요소를 가진 부모 요소를 선택하는 has() 선택자

개요

has() 선택자는 특정 조건의 요소를 자식으로 가진 부모 요소를 선택할때 유용하게 사용할 수 있다.

기존에는 javascript 를 이용해야만 구현가능 했던 기능을 javascript 없이 구현할 수 있어 편하다

 

구문

selector:has(sub-selector) {
	/* CSS rules */
}

 

예제

li:has(a) {
	border: 1px solid #000;
}

a 요소를 가진 li 에만 border 를 줄 경우

응용1

See the Pen :has() 예제 - hover by woox (@woox-styler) on CodePen.

 

위 예제는 내가 실무에서 자주 사용하는 패턴이다

특정 요소에 마우스 호버 될 경우 호버된 대상이 아닌 다른 대상들에게 영향을 줘야 할 때 사용한다.

 

지원 브라우저

대부분의 브라우저에서 사용가능 하다