Existe-t-il un sélecteur CSS pour le premier enfant direct uniquement?

J'ai le html suivant

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

Et le style suivant:

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

Pour une raison que je ne comprends pas, le style est appliqué au "sous-contenu 1" <div> ainsi qu'à "l'en-tête" <div> .

Je pensais que le sélecteur sur le style ne s'appliquerait qu'au premier enfant direct d'un div avec une classe appelée "section". Comment puis-je changer le sélecteur pour obtenir ce que je veux?

Ce que vous avez publié signifie littéralement "Trouvez tous les divs qui sont à l'intérieur des divs de section et qui sont le premier enfant de leurs parents." Le sous contient une balise qui correspond à cette description.

Il m'est difficile de savoir si vous voulez ou non les deux enfants de la div principale. Si oui, utilisez ceci:

div.section > div

Si vous ne voulez que l'en-tête, utilisez ceci:

div.section > div:first-child

En utilisant les >modifications, la description devient: "Trouvez tous les divs qui sont les descendants directs des divs de section", c'est ce que vous voulez.

Veuillez noter que tous les principaux navigateurs prennent en charge cette méthode, à l'exception d'IE6. Si la prise en charge d'IE6 est essentielle à la mission, vous devrez ajouter des classes aux divisions enfant et l'utiliser à la place. Sinon, ça ne vaut pas la peine de s'en soucier.

Trouvé cette question en recherchant sur Google. Cela retournera le premier enfant d'un élément avec la classe container, quel que soit le type de l'enfant.

.container > *:first-child
{
}

CSS est appelé feuilles de style en cascade car les règles sont héritées. En utilisant le sélecteur suivant, va sélectionner uniquement l'enfant direct du parent, mais ses règles seront héritées par ce divenfants de divs:

div.section > div { color: red }

Maintenant, cela div et ses enfants le seront red. Vous devez annuler tout ce que vous définissez sur le parent si vous ne voulez pas qu'il hérite:

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

Maintenant, seul le single divqui est un enfant direct de div.sectionsera rouge, mais ses enfants divsseront toujours noirs.

div.section > div

Utilisez div.section > div.

Mieux encore, utilisez une <h1>balise pour l'en-tête et div.section h1dans votre CSS, afin de prendre en charge les navigateurs plus anciens (qui ne connaissent pas le >) et de conserver votre sémantique de balisage.

Le sélecteur CSS pour le premier enfant direct dans votre cas est:

.section > :first-child

Le sélecteur direct est> et le premier sélecteur d'enfant est: premier enfant

Pas besoin d'un astérisque avant le: comme d'autres le suggèrent. Vous pouvez accélérer la recherche DOM en modifiant cette solution en ajoutant la balise:

div.section > :first-child