jQuery combination of :not + :contains, does it work?

Question

<div id="main">
    <div class="a">aaaa</div>
     <div class="b"><p>not me</p></div>
     <div class="b">bbbb</div> <!-- select this-->
     <div class="b">bbbb</div> <!-- select this-->
     <div class="c">cccc</div>
</div>

I'm trying to select all divs with class b that doesn't have <p>not me</p> inside of them.

I tried this:

$('div.b:not(:has(p:contains(not me)))').css('color', 'red');

But from some unknown reason it doesn't work, funny thing is, that if I remove the :not() part:

$('div.b:has(p:contains(not me))').css('color', 'blue');

It does select the unwanted div, so the problem must be with :not

Live DEMO

I know there are other and even better ways,(I even gave some in that question) but I'm interested to know why :not + :contains doesn't seem together.

@eric.itzhak. Please read the last paragraph... Or the other question. — gdoron, Jun 13 '12 at 11:13

score 3 · Answer 1 · answered Jun 13 '12 at 11:14

3

You could use .not rather than :not:

$('div.b').not(':has(p:contains("not me"))').css('color', 'red');

Updated fiddle

answered Jun 13 '12 at 11:14

T.J. Crowder

1,031,962
187
1,923
1,875

I know, I'm asking about the `:not` selector. but thanks for the input, I'll accept it if it's impossible. – gdoron Jun 13 '12 at 11:15
1

@gdoron: There are a couple of existing bugs with `:not` and/or `:has`, this could be one of them... :-) – T.J. Crowder Jun 13 '12 at 11:18
[Badge](http://stackoverflow.com/questions/10584488/why-event-bubbles-is-false-for-focusin-and-focusout#comment13707233_10584541) My second time now... `:)` – gdoron Jun 13 '12 at 11:19
@gdoron haha, Congratulation. – Ram Jun 13 '12 at 11:36
Though I decided to take a break from SO for couple of months, I think you might want to read [this ticket](http://bugs.jquery.com/ticket/11902) (yes, it's a bug, and it's fixed in 1.8) – gdoron Jul 14 '12 at 19:31

labtoy · Answer 2 · 2012-06-13T11:52:53.847

1

example of working :not + :contains

$('div.b:not(:contains("not me"))').css('color', 'cyan');

will change the color of all the div.b's that does NOT contain "not me".

edited Jun 13 '12 at 11:52

answered Jun 13 '12 at 11:25

labtoy

198
8

It really should be `:not(:contains("not me")` though. It does not take into account that the div should have a `p` element as child. – Felix Kling Jun 13 '12 at 11:45
1

it works regardless if it contains a p or not. am i misunderstanding what you are trying to say? – labtoy Jun 13 '12 at 11:55

score 0 · Answer 3 · answered Jun 13 '12 at 11:17

0

I think it has something to do with :has

Try this:

$('div.b:not(:contains(not me))').css('color', 'red');

answered Jun 13 '12 at 11:17

U.P

7,357
7
39
61

score 0 · Answer 4 · edited Jun 30 '22 at 17:12

<div id="main">
    <div class="a">aaaa</div>
     <div class="b"><p>not me</p></div>
     <div class="b">bbbb</div> <!-- select this-->
     <div class="b">bbbb</div> <!-- select this-->
     <div class="b"><p>no1t me</p></div>
     <div class="c">cccc</div>
</div>

Try this...

$('div.b:has(p:contains(not me))').css('color', 'green');
    
$('div.b:not(:has(p))').css('color', 'red');
    
$('div.b:has(p):not(:contains(not me))').css('color', 'blue');

See the output here

jQuery combination of :not + :contains, does it work?

4 Answers4