Are multi-level :not selectors possible in CSS / JS querySelector? - css

Question

I have found many examples explaining how to use multiple :not selectors on an individual element. However, so far I have been unable to find any examples that use :not selectors on different levels within a single selection path in CSS / JS querySelector.
For example, given a HTML structure of:
<div class="anything_except_ignore">
<input type="text" id="a" />
<input type="hidden" id="b" />
</div>
<div class="ignore">
<input type="text" id="c" />
</div>
I wish to select JUST input#a.
I have tried the following in JS and it does not seem to work:
var elems = document.querySelectorAll("div:not(.ignore) input:not([type='hidden'])");
In this case it appears the first :not selector is ignored (so in the above example both input#a AND input#c are selected.
Have I made a mistake in the syntax or is this approach not possible to use :not selectors in this way to select just input#a?
I can work around this by looking a parent class in JS once the elements are selected, but I'd rather do it properly at the selector stage.
---UPDATE--- as suggested in one of the answers, my mistake was in not understanding that other DIVs further up the DOM can fulfil the :not(.ignore) criteria and so the input under the div.ignore element IS selected. If I remove other DIVs then the requested logic does seem to work as proved by this test:
var res="",elems = document.querySelectorAll("div:not(.ignore) input:not([type='hidden'])");
for(var i=0;i<elems.length;i++){
res = res + elems[i].id + "\n";
}
alert(res);
<div class="anything_except_ignore">
<div>
<input type="text" id="aa" value="a"/>
<input type="hidden" id="bb" value="b"/>
</div>
</div>
<div class="anything_except_ignore2">
<span>
<input type="text" id="dd" value="d"/>
<input type="hidden" id="ee" value="e"/>
</span>
</div>
<div class="ignore">
<input type="text" id="cc" value="c"/>
</div>
Sorry for any confusion, but at least this helps clarify how it should work as I could find no other examples of this in my searching.
---CONCLUSION---
As far as I can tell I have to either:
make sure that my inputs are always immediate children of the div I want to check and use the ">" syntax
after selection of all non-hidden inputs, use JS to check up the DOM tree of each, to check the class name of all DIVs up the tree.
If there is a better querySelector way to solve this particular issue then I'd love to hear it.

Answer 1

This is a common misunderstanding of how :not works in combination with other selectors.
Let me guess, there are actually more div elements than you have shown us, around these elements …?
div:not(.ignore) is not “ignored”, but the condition is just fulfilled by a different element than you thought - by some div element further up the tree. The space in between the two partial selectors is the descendant selector, so every input:not([type='hidden']) element that has a div ancestor that doesn’t have the class ignore anywhere above it in the DOM tree, matches the full selector.
If you change your selector to div:not(.ignore) > input:not([type='hidden']), this would only select such input fields if their immediate parent is a div without that class.