Question

I’m struggling with a css selector. I need a css rule that returns all input fields but those below a specific one.

This is a html code example:

<div id="container">
    <div>
        <input name="apple">
        <div class="sub">
            <input name="banana">
            <input name="grapefruit">
        </div>
    </div>
</div>

The spoken rule is:

Give me all input fields below #containerbut not those below an element with the class name “sub”.

The html code is dynamic, so I can’t rely on simple child selectors like >. I already fiddled around with the :not() selector but had no luck so far.

Note: I’m using jQuery for element selection.

Answer 1

You should be looking at something like this;

$('input:not(.sub input)')

The :not selector is excluding the input elements which are below sub. You could also use something like this which might be clearer:

$('input').not($('.sub').find('*'));