web-dev-qa-db-fra.com

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 en train de s’appliquer à "sous-contenu 1"<div> ainsi qu’à "en-tête"<div>.

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

htmlcsscss-selectors
281
Jeremy

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

Je ne sais pas si vous voulez ou non les deux enfants de la division principale. Si oui, utilisez ceci:

div.section > div

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

div.section > div:first-child

Utiliser le > change la description en: "Trouvez tous les divs qui sont les descendants directs des divs de section", ce que vous voulez.

Veuillez noter que tous les principaux navigateurs supportent cette méthode, sauf IE6. Si le support IE6 est essentiel à la mission, vous devrez ajouter des classes aux divs enfants et les utiliser à la place. Sinon, ça ne vaut pas la peine qu'on s'en occupe.

474
Matchu

CSS s'appelle les 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 les enfants de cette divdivs:

div.section > div { color: red }

Maintenant, à la fois que divet ses enfants seront red. Vous devez annuler ce que vous avez défini 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 ce single div qui est un enfant direct de div.section sera rouge, mais ses enfants divs seront toujours noirs.

40
Doug Neiner

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

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

Utilisez div.section > div.

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

6
ЯegDwight

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 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 le tag:

div.section > :first-child
0
Matt Parkins