using not in querySelector with spaces

Question

I'd like to retrieve all elements which are not child's of other element. i had tried this code example (that seems like a perfectly valid css3 selector to me):

document.querySelector("span:not(p span)")

its doesn't work in chrome , what shall i do?

@charlietfl: That single line of code is all the MCVE you need. Run it and it'll throw a SYNTAX_ERR. — BoltClock, Jan 16 '17 at 03:32
@BoltClock was thinking along the lines of sample html. May or may not be important but certainly helpful and less prone to gess work — charlietfl, Jan 16 '17 at 03:33
@charlietfl: Fair enough. That can be gleaned from the selector as well - a span that is not a descendant of p, but it might not always be what the asker intended. — BoltClock, Jan 16 '17 at 03:36

score 2 · Answer 1 · answered Jan 15 '17 at 20:42

Support for the selector list argument of :not is currently limited to Safari and Mobile Safari. Other browsers do not yet support it and treat the selector as invalid instead.

Basic :not() support only allows simple selectors, which do not support descendant combinators.

Alternative approaches you may be able to take include:

Setting the rules for all spans and then writing different rules for p span elements.
Writing a selector that matches the elements in some other way, such as body > span.

The specifics would depend on the precise nature of your markup.

score 1 · Accepted Answer · answered Jan 15 '17 at 20:54

Could add a class to all p span and then use that class as a not filter

var pSpans = document.querySelector("p span");
for(var i=0; i<pSpans.length; i++){
  pSpans[i].classList.add('p-span');
}

var notPspans = document.querySelector("span:not(.p-span)")

using not in querySelector with spaces

2 Answers2