I want to select a particular node with two not clauses, but I had no success so far. What I need to do is, select an element whose div contains the string 0008, but it's not 10008 and also it does not contain the tag "style", so, in theory it should work like that:

document.querySelectorAll(" div[id*='0008']:not([id='10008'][style])")

However, as you might suspect, it doesn't work that way.

document.querySelectorAll(" div[id*='0008']:not([id='10008'])")
document.querySelectorAll(" div[id*='0008']:not([style])")

Both of them work perfectly individually, of course.

I want to select a particular node with two not clauses, but I had no success so far. What I need to do is, select an element whose div contains the string 0008, but it's not 10008 and also it does not contain the tag "style", so, in theory it should work like that:

document.querySelectorAll(" div[id*='0008']:not([id='10008'][style])")

However, as you might suspect, it doesn't work that way.

document.querySelectorAll(" div[id*='0008']:not([id='10008'])")
document.querySelectorAll(" div[id*='0008']:not([style])")

Both of them work perfectly individually, of course.

• javascript
• jquery
• css
• dom
• selector

• 1 Did you try $(" div[id*='0008']:not([style]):not([id='10008'])") – adeneo Commented Feb 14, 2013 at 22:01
• This is the expected behavior of querySelectorAll. Complex selectors are not allowed in a :not(). The solution proposed by @adeneo should work. – the system Commented Feb 14, 2013 at 22:02
• 2 If you bine them, it's saying NOT elements that have both, but allow elements that have one or the other. – Kevin B Commented Feb 14, 2013 at 22:03
• @KevinB: If you bine them, it throws a DOM Exception. – the system Commented Feb 14, 2013 at 22:06
• 1 Is this a jQuery question? Or a document.querySelectorAll() question? There are different options open for each. – jfriend00 Commented Feb 14, 2013 at 22:11

3 Answers 3

not 10008 and also it does not …

That's not what your current selector checks, it test whether it has not ( the id and a style attribute ) . Use this instead:

div[id*='0008']:not([id='10008']):not([style])

Your original solution also was not a valid selector, since :not() may only contain one simple selector, while you had two of them. Yet, selector libraries like jQuery's sizzle engine might support them. So with jQuery, the following would work as well:

div[id*='0008']:not([id='10008'],[style])

jsFiddle Demo

Logically, you are trying to exclude elements that match either of the two undesired selectors, not elements that match them both. In jQuery, the multiple selector (which will then match all of the undesired elements, then be negated) is simply a ma-separated listing. Therefore you simply do this:

$("div[id*='0008']:not([id='10008'],[style])")

From the jQuery docs (since this question is tagged jQuery):

All selectors are accepted inside :not(), for example: :not(div a) and :not(div,a).

I'd just do:

var elems = $('div[id*="0008"]').filter(function() {
    return !this.hasAttribute("style") && this.id == '10008';
});

I don't think I really get this, but this would filter out:

<div id="10008" style="color: black">10008</div>

but not:

<div id="10008">10008</div>

ID's are of course unique, and there could be a real world use case for this, but it still seems like an edge case that you'd normally handle some other way, as once you'd filtered out the ID, why exactly do you need to match a style tag as well ?