与えられた要素の下にない要素を選択する

Question

私はCSSセレクターに苦労しています。私はすべての入力フィールドを返すCSSルールが必要ですが、特定のフィールドの下にあるものは返します。

これは、HTMLコードの例です：

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

話さルールは次のとおりです。

は私#containerではなく、クラス名「サブ」と要素以下のものを以下のすべての入力フィールドを与えます。

htmlコードは動的なので、私は>のような単純な子セレクタに頼ることはできません。私は既に:not()セレクターで騒がれていましたが、これまでのところ運がありませんでした。

注：要素選択にjQueryを使用しています。

Answer 1

このようなものを見てください。

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

:notセレクタは、下にある入力要素を除きます。このようなものを使用すると、より明確になる可能性があります。

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

Answer 2

$("#container input").filter(
        function(){ 
           return $(this).parent().hasClass("sub")==false 
           } 
          ).css('background-color','red'); //make those elements - RED