0

(continue from other 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.

4
  • @eric.itzhak. Please read the last paragraph... Or the other question.
    – gdoron
    Jun 13, 2012 at 11:13
  • i think :not is suppoused to work with :has... Jun 13, 2012 at 11:14
  • i think culprit is :has not :not
    – Ram
    Jun 13, 2012 at 11:16
  • @undefined. those can work together.
    – gdoron
    Jun 13, 2012 at 11:18

4 Answers 4

3

You could use .not rather than :not:

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

Updated fiddle

5
  • 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, 2012 at 11:15
  • 1
    @gdoron: There are a couple of existing bugs with :not and/or :has, this could be one of them... :-) Jun 13, 2012 at 11:18
  • Badge My second time now... :)
    – gdoron
    Jun 13, 2012 at 11:19
  • @gdoron haha, Congratulation.
    – Ram
    Jun 13, 2012 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 (yes, it's a bug, and it's fixed in 1.8)
    – gdoron
    Jul 14, 2012 at 19:31
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".

2
  • 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. Jun 13, 2012 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, 2012 at 11:55
0

I think it has something to do with :has

Try this:

$('div.b:not(:contains(not me))').css('color', 'red');
0
<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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.