web-dev-qa-db-ja.com

最初の直接の子だけを対象とした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 
{
  ...
}

何らかの理由で "sub contents 1"<div>と "header"<div>にスタイルが適用されていることが理解できないのですが。

スタイルのセレクターは "section"というクラスを持つdivの最初の直接の子にのみ適用されると思いました。欲しいものを手に入れるためにセレクタを変更するにはどうすればいいですか？

htmlcsscss-selectors
273
Jeremy

あなたが文字通りに投稿したのは、「セクションdivの内側にあり、それらの親の最初の子であるdivを見つける」という意味です。 subにはその説明に一致するタグが1つ含まれています。

あなたが主divの両方の子供が欲しいかどうかは私には不明です。もしそうなら、これを使用してください：

div.section > div

ヘッダだけが欲しい場合は、これを使います。

div.section > div:first-child

>を使用すると、説明が「セクションdivの直接の子孫であるdivをすべて検索する」に変更されます。

IE6を除くすべての主要ブラウザがこの方法をサポートしています。 IE6のサポートがミッションクリティカルな場合は、代わりに子divにクラスを追加して使用する必要があります。そうでなければ、それは気にする価値はありません。

456
Matchu

ルールは継承されるため、CSSはカスケーディングスタイルシートと呼ばれます。次のセレクタを使用すると、willは親の直接の子だけを選択しますが、その規則はinheritedbyになります。そのdivの子divs：

div.section > div { color: red }

さて、そのdivとの子は両方ともredになります。継承したくない場合は、親に設定したものをすべてキャンセルする必要があります。

div.section > div { color: red }
div.section > div div { color: black }

div.sectionの直接の子であるそのdivだけが赤になりますが、その子divsはまだ黒になります。

40
Doug Neiner

この質問はGoogleで検索しました。これは、子がどんな型であるかにかかわらず、クラスcontainerを持つ要素の最初の子を返します。

.container > *:first-child
{
}
33
Tom Gullen
div.section > div
6
3zzy

div.section > divを使用してください。

さらに良いことには、CSSで見出しと<h1>にdiv.section h1タグを使用して、古いブラウザ（>について知らない）をサポートするようにし、マークアップの意味を維持します。

6
ЯegDwight

あなたの場合の直接の最初の子のCSSセレクターは次のとおりです。

.section > :first-child

直接セレクターは>で、最初の子セレクターは：first-childです

他の人が示唆するように、：の前にアスタリスクは必要ありません。タグを前に付けてこのソリューションを変更することにより、DOM検索を高速化できます。

div.section > :first-child
0
Matt Parkins