jQuery 공작소 : :has

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

:has 셀렉터는 지정한 셀렉터에 해당하는 요소가 있는것을 찾습니다.

예제 1
기본 예제
보기
아래 버튼을 눌러보세용

CSS 공작소

CSS 공작소

CSS 공작소
소스
<style type="text/css">
    .css_test p {
        padding : 0;
        margin : 0;
    }
    .css_test div {
        border-radius : 5px;
        border : 5px solid silver;
        margin : 10px;
        padding : 10px;
    }
</style>
아래 버튼을 눌러보세용<br><br>
<button type="button" onclick="$('.css_test div:has(p)').css('border-color', 'blue')">has(p)</button>
<button type="button" onclick="$('.css_test div:has(span)').css('border-color', 'red')">has(span)</button>
<button type="button" onclick="$('.css_test div').css('border-color', '')">다시하기</button>

<div class="css_test">
    <div>CSS 공작소</div>
    <div><p>CSS 공작소</p></div>
    <div><span>CSS 공작소</span></div>
</div>
관련 CSS
jQuery

$( '.css_test  div:has(셀렉터)' )  -  클래스명이 css_test 인 요소의 div셀렉터에 해당하는 요소가진것 찾기
$( '.css_test  div:has(p)' )  -  클래스명이 css_test 인 요소의 divp요소가진것 찾기
$( '.css_test  div:has(span)' )  -  클래스명이 css_test 인 요소의 divspan요소가진것 찾기 

jQuery 홈페이지 :has API 문서 : http://api.jquery.com/has-selector/