CODEWITHSUNDEEP
jquerycss-selectors
Trevor
Trevor

Reputation: 103

jQuery Selectors - where item does not have children with a certain class

I want to select list items that are immediate children of #nav, that do not themselves have immediate children with an 'active' class.

This is what I think it should be but it does not work:

$('#nav > li:not(> a.active)')

Upvotes: 10

Views: 17526

Answers (4)

regisbsb
regisbsb

Reputation: 3814

This is how you do it:

    $('#nav > li:not(:has(a.active))')

Upvotes: 28

Jon
Jon

Reputation: 6046

I really like Ken's solution, but just for an alternative take.

You could add the active class to your list items instead of your links inside. Then your selector could look like:

$("ul#nav li:not(.active)");

If you want to style the links based on the active class, your CSS could look like this:

#nav li.active a{background-color:red;}

Upvotes: 3

Ken Browning
Ken Browning

Reputation: 29091

You'll need to use jQuery's filter function:

$('#nav > li').filter(function() { return !($(this).children().is('.active')); })

Upvotes: 11

Jeremy B.
Jeremy B.

Reputation: 9216

For this jquery has the not selector

you can do something like

$("#nav > li").children(":not(.active)");

Upvotes: 0

Related Questions