Gideon Gideon - 4 months ago 10
CSS Question

Select children under the css pseudo class selector

I'm using Bootstrap tabs, both directly under

<body>
, and inside a
.modal
. I need to select the tabs not inside a
.modal
via
css
. But this doesn't work:

var act = $("div:not(.modal) ul.nav li";


Intead of disregarding
.modal
contents, it also selects the tabs inside
.modal
s. Is this a known limitation, is this achievable? Is there any workaround for this?

<body>
<div>
...
<!-- More nested on actual code-->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#" data-toggle="tab">Tab 1</a>
</li>
<li role="presentation">
<a href="#" data-toggle="tab">Tab 2</a>
</li>
</ul>
</div>
...
<div class="modal fade lookup" id="search-adjustment-report-header-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
...
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#" data-toggle="tab">Tab 1</a>
</li>
<li role="presentation">
<a href="#" data-toggle="tab">Tab 2</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>


I actually need this query for setting some cookies, default tab selected, etc.

Answer

var act = $("ul.nav > li:not(div.modal ul.nav > li)");

is working fine: https://jsfiddle.net/ue6jqp23/1/