css - CSSの特定の要素の直接の子ではない要素にどのように対処する必要がありますか？

Question

このスニペットを検討してください。

<div class="container">
  <input type="text">
  <div class="myList">
   <input type="text">
  </div>
</div>

次のセレクターは、明らかに私が間違っていたmyListの直接の子であるものを除いて、テキスト入力全体に対応できると思いました。

.container :not(div.myList) input[type="text"] {
}

どうすればいいの？CSSで可能ですか？これが私が物事をより速くするために作成したhttp://jsfiddle.net/C46tN/です。

ありがとう。

Answer 1

あなたには2つの問題があります：

1）：not（div.myList）は実行できません。：not（.myList）のみを実行できます。

これは正しい構文です：

.container :not(.myList) input[type="text"] {
    border:2px solid #f00;
}

このクラスをdivのみに設定した場合、これは実際の問題ではありません。

2）このルールで実際に言っているのは、クラスmyListに属さない要素の子孫である、つまりコンテナーの子孫であるinoutsです。つまり、コンテナの直接の子孫を選択しないということです。