select div only if it contains select - css

Question

Is there any CSS selector for selecting a parent div only if it directly contains a select inside ?
Example code:
<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>
Suppose I only want to select the third 3rd top_level class div, since it contains a select directly inside it, how would I do that ?
I did try to search around for an answer, but couldn't find any. It would have been a lot easier if parent selection was possible in CSS.

Answer 1

If you're using jQuery, then you can use :has :
$('div.top_level:has(select)')
If you're using only CSS, then the answer is simple : No, you don't have anything similar to select a parent.

Answer 2

You can use :empty pseudo class to check whether your container is empty (excluding line breaks).
You cannot check whether it contains a type of element. But you may be able to restructure your markup to use :empty selector
eg :
<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>
Now you may query like
.list:not(:emtpy) {
// to select all lists that are non-empty
}