html - 孫を除くすべての子要素を取得する方法

Question

ここを参照してください：http://jsfiddle.net/QVhAZ/4/

どうすれば使用でき*ますが、直接の子にのみ適用できますか? divこの例では、「孫（赤であってはならない）」ではなく、「子」にのみ適用したいと思いますdiv。

各「子」にクラスを適用したくありませんdiv。言いたいことは次のとおりです。

div#Root *:depth(1)
{
    color: red;
}

Answer 1

これのことですか？

div {margin:20px;}

div#Root > div {color:red;}

div#Root > div > div {color:black;}

http://jsfiddle.net/QVhAZ/20/

また、 * セレクターを使用すると、div だけでなくすべての要素が選択されます。また、すべてを解析する必要があるため、速度も大幅に低下します。色は引き続きすべての子に継承されるため、残りのすべてに使用する色を指定する必要があることに注意してください。

Answer 2

直接の子が必要な場合は、子セレクターを使用します。

div > * {
  /* styles for all direct children of div */
}

注: colorプロパティは自動的にカスケードされるため、これは少しトリッキーになります。孫のプロパティをリセットする必要があります（easweeの回答を参照）。しかし、これが実際に進むべき道であることを証明するには、border正しく動作することを確認してください - http://jsfiddle.net/QVhAZ/22/

Answer 3

これを試して

div#Root > *
{
    color: red;
}

Answer 4

CSS セレクターのリファレンスを確認する必要があるかもしれません。

element1 > direct-child {
}

Answer 5

すべてのブラウザー (特に IE6) で動作させたい場合は、孫の div id を指定する必要があります。たとえば、子で指定されたスタイルをオフにできます。

HTML

<div>
  <div class="child">
    <div class="grandchild"></div>
    <div class="grandchild"></div>
    <div class="grandchild"></div>
  </div>
  <div class="child">
    <div class="grandchild"></div>
    <div class="grandchild"></div>
    <div class="grandchild"></div>
  </div>
</div>

スタイル

.child{margin-left:10px;}
.grandchild{margin-left:0px;}

少し面倒ですが、次のような CSS セレクターをサポートしていないブラウザーでも確実に動作します。div > *

これは@easweeが使用したのと同じ例ですが、IE6で動作するように調整しただけですhttp://jsfiddle.net/ajthomascouk/QVhAZ/24/