특정 요소를 포함하는 요소를 선택하는 선택자 - :has()

:has()

:has()는 특정 요소를 포함하는 요소를 선택할 때 사용하는 선택자입니다.

 

기본형

$( ':has(selector)' )

예를 들어

$( 'p:has(span)' )

은 <span> 요소를 가지고 있는 <p> 요소를 선택합니다.

 

예제

하위 요소로 <a> 요소를 갖는 <li> 요소를 선택하여 빨간색 테두리를 만듭니다.

<h2>jQuery Selector - :has()</h2>
<ul>
  <li>Lorem</li>
  <li><a href="#">Ipsum</a></li>
  <li>Dolor</li>
  <li>Sit</li>
  <li><a href="#">Amet</a></li>
</ul>

$( document ).ready( function() {
  $( 'li:has( a )' ).css( 'border', '1px solid red' );
});