css - Is there a CSS Selector to select all first descendents of a given element?

Question

<article>
 <header targetme!>
  <h1 don't target me></h1>
 </header>
 <p targetme! ></p>
 <p targetme! ></p>
 <div targetme!>
  <p don't target me></p>
 </div>
</article>

Is there a CSS selector (IE7 and up) that we can use to select only the first descendants of a given element (in this case, article) ?

Answer 1

子コンビネータ、を使用して、>直接の子のみを選択し、ユニバーサルセレクタ、、を使用して*、すべての要素に一致させることができます。

article > * {
    /* Your styles */
}

IE7は子コンビネータをサポートしていますが、IE6はサポートしていないことに注意してください。

Answer 2

を使用し>て、セレクターの最初の子孫/子要素を選択します

.selector > .childelementonlyselector

これは、上記の例のように、IDセレクター#id、タグセレクターdiv、およびクラスセレクターに適用されます。.class

Answer 3

次の手順を実行して、すべての直接の子孫を選択できます。

article > *

Answer 4

使用できます$('article').children();

それはあなたが望むことをするはずです、.children（） apiリファレンスを見てください。