[解決済み】最初の直接の子だけを対象としたCSSセレクタはありますか？

質問

以下のようなhtmlがあります。

<div class="section">
   <div>header</div>
   <div>
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>

そして、次のようなスタイルです。

DIV.section DIV:first-child 
{
  ...
}

よくわからない理由で、スタイルが サブコンテンツ1" <div> と同様に "ヘッダー"。 <div> .

スタイルのセレクタは、"section"というクラスを持つdivの最初の直接の子のみに適用されると思いました。 どのようにセレクタを変更すれば、私が望むものを得ることができますか？

解決方法は？

投稿された内容は、文字通り、"セクションdivの内部にあり、その親の最初の子であるすべてのdivを検索します。

main div の両方の子にしたいのか、そうでないのか、私には不明です。もしそうなら、これを使います。

div.section > div

ヘッダーのみが必要な場合は、これを使用します。

div.section > div:first-child

を使用することで > は、説明を次のように変更します: "セクション divs の直接の子孫である任意の divs を検索します" これは、あなたが望むものです。

なお、この方法はIE6を除くすべての主要なブラウザでサポートされています。IE6 のサポートが重要な場合は、子 div にクラスを追加して、それを代わりに使用する必要があります。そうでなければ、気にする必要はないでしょう。