html - cssセレクターで1つのdiv内にないすべての入力を見つける方法は？

Question

HTMLコード：

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

ここで、cssセレクターを使用して、内部にあるが内部に#div1はないすべての入力を検索します。これを行う方法？.nesti2,i3,i4

Answer 1

マークアップを指定すると、子セレクターで使用できるはずです。:not()

div:not(.nest) > input

スコープを制限する#div1必要がある場合は、もう少し複雑なセレクターが必要になる場合があります。

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

入れ子のレベルが任意で制御されていない場合、:not()単独ですべてのケースをカバーできるかどうかはわかりません。

また、ブラウザのサポートの問題が原因でまったく使用できない場合は:not()、純粋なCSSを使用できません。

Answer 2

最も簡単な方法は、子セレクターを使用することです。

#div1 > input

Answer 3

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