CSS의 :has() 선택자 활용하기: 특정 자식 요소 선택하기

안녕하세요 찐망고입니다.

 

CSS의 `:has()` 함수는 특정 자식 요소를 가진 부모 요소를 선택할 수 있게 해줍니다.

이것은 이전 CSS선택자에선 할 수 없는 것들을 가능하게 해주는데요.

 

아래 예시를 볼까요?

<div class="parent">
    <div class="child">Child1</div>
</div>
<div class="parent">
    <div class="child special">Special Child</div>
</div>
<div class="parent">
    <div class="child">Child2</div>
</div>

 

.parent:has(.special) {
    background-color: yellow;
}

 

 

위 코드에서 `.special` 클래스를 가진  두번째 `.parent` 요소가 선택 되어 배경색이 바뀝니다.

 

 

 

다음 예시도 볼까요?

<ul>
   <li class="menu">
    	<a class="#"><span class="on">menu</span></a>
        <div class="depth">
        	<p>depth..</p>
        </div>
    </li>
    <li class="menu">
    	<a class="#"><span>menu</span></a>
        <div class="depth">
        	<p>depth..</p>
        </div>
    </li>
    <li class="menu">
    	<a class="#"><span>menu</span></a>
        <div class="depth">
        	<p>depth..</p>
        </div>
    </li>
</ul>

 

.depth {
	display: none;
}
.menu > a:has(> .on) + .depth {
	display: block;
}

 

`.menu`클래스를 가진 li요소의 자식 a의 자식에게 on클래스가 있는 경우

a요소의 형제인 depth요소가 display: block이 되는 코드입니다.

 

 

참고해서 작업해보세요.