div가 포함 된 경우에만 선택

Question

직접 선택 영역을 포함하는 경우에만 상위 div를 선택하기위한 CSS 선택기가 있습니까?

예제 코드 : 나는 그렇게 얼마나

<div class="top_level"> 
    <input type="radio"></input> 
</div> 
<div class="top_level"> 
    <input type="text"></input> 
</div> 
<div class="top_level"> 
    <select name="namehere"> 
    <option>...</option> 
    <option>...</option> 
    <option>...</option> 
    </select> 
</div> 

가 직접 내부의 선택을 포함하고 있기 때문에 가정하자 난 단지, 제 3 top_level 클래스 사업부를 선택하려면?

답변을 검색하려고했지만 찾으려고하지 않았습니다. CSS에서 부모 선택이 가능하면 훨씬 쉽습니다. 당신이 jQuery를 사용하는 경우

Answer 1

, 당신은 :has 사용할 수 있습니다 만 CSS를 사용하는 경우

$('div.top_level:has(select)') 

, 그 대답은 간단하다 : 아니, 당신은을 선택 유사한 아무것도하지 않습니다 부모의.

Answer 2

빈 가상 클래스를 사용하여 컨테이너가 비어 있는지 (줄 바꿈 제외) 확인할 수 있습니다.

요소 유형이 포함되어 있는지 확인할 수 없습니다. 하지만 당신이 사용하는 마크 업을 재구성 할 수 있습니다 : 빈 선택

이 예는 :

이제

<div class="top_level"> 
    <input type="radio"></input> 
    <div class="list"></div> 
</div> 
<div class="top_level"> 
    <input type="text"></input> 
    <div class="list"></div> 
</div> 
<div class="top_level"> 
    <div class="list"> 
    <select name="namehere"> 
    <option>...</option> 
    <option>...</option> 
    <option>...</option> 
    </select> 
</div> 
</div> 

당신의

.list:not(:emtpy) { 
       // to select all lists that are non-empty 
}