I have come across numerous tutorials explaining the use of multiple :not selectors on a single element. However, I have yet to find any examples of using :not selectors on different levels within a single CSS / JS querySelector path. For instance, consider the following HTML structure:
<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 want to specifically select only input#a. I attempted the following in JS, but it did not yield the desired result:
var elems = document.querySelectorAll("div:not(.ignore) input:not([type='hidden'])");
In this scenario, it seems that the first :not selector is being disregarded (as both input#a AND input#c are being selected in the example above).
Is there a mistake in my syntax, or is it not possible to utilize :not selectors in this manner to solely select input#a?
I can find a workaround by examining the parent class in JS after the elements are selected, but I would prefer to address it correctly at the selector stage.
---UPDATE--- Upon suggestion in one of the responses, I misunderstood that other DIVs higher up in the DOM can meet the :not(.ignore) criteria, causing the input under the div.ignore element to be selected. By removing other DIVs, the intended logic does seem to function, as evident in 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>My apologies for any confusion, but this clarification should help understanding how it is supposed to work, as I could not find any other instances of this in my research.
---CONCLUSION--- As far as I can discern, I must either:
Ensure that my inputs are always direct children of the desired div and utilize the ">" syntax
After selecting all non-hidden inputs, use JS to examine the class name of all parent DIVs in the tree.
If there is a more effective querySelector method to address this specific issue, I am eager to learn about it.