How to find all inputs which is not inside one div with css selector?

Question

Html code:

<div id="div1">
  <div class="nest">
     <input name="i1"/>
  </div>
  <div>
      <input name="i2"/>
  </div>
  <input name="i3"/>
  <div>
      <input name="i4" />
  </div>
</div>

Now I want to find all inputs which are inside #div1 but not inside .nest with css selector, which are i2,i3,i4 . How to do this?

Answer 1

Given your markup, you should be able to use :not() with a child selector:

div:not(.nest) > input

If you need to restrict the scope to #div1 you may need a slightly more complex selector:

#div1 > input, #div1 > div:not(.nest) > input

If you have arbitrary and uncontrolled levels of nesting, I'm not sure you'll be able to cover all cases using :not() alone.

And if you can't use :not() at all due to browser support issues, you're out of luck using pure CSS.

Answer 2

最简单的方法是使用子选择器：

#div1 > input

Answer 3

#div1 div:nth-child(2) > input, #div1 div:last > input