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


315

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?


Réponses:


519

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.


8
: le premier enfant n'est pas requis, dans ce cas.
eozzy

3
il semble que le PO ne pose pas autant de questions sur le sélecteur que sur la raison pour laquelle la règle est appliquée à toutes les divisions enfant.
Doug Neiner

Mon interprétation est qu'il obtient le concept d'héritage CSS et qu'il pensait que le premier enfant aurait l'effet que cela a. C'est un libellé plutôt flou.
Matchu

3
Ah, les joies d'être assez vieux pour se souvenir quand le sélecteur "descendant direct" résoudrait tous vos problèmes mais vous ne pouviez pas l'utiliser parce qu'il ne fonctionnait pas dans IE . Il s'ensuivrait alors beaucoup de frustrations inutiles.
2017 à

Elle s'applique également au premier enfant du premier enfant. Si vous devez vraiment appliquer les modifications uniquement au premier enfant, nous devons annuler les modifications sur les enfants de l'enfant. Quelque chose comme ça:div.section > div:first-child > div { /* Cancel Changes*/}
Mahdi J.Ansari

51

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
{
}

44

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.



6

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.


Bonne idée, malheureusement, je dois également prendre en charge IE6, et si j'utilise h1, je devrai définir la taille de la police pour hériter afin que la police corresponde à celle du corps, et ie7 et les versions antérieures ne prennent pas en charge l'héritage. arg!
Jeremy

De plus, j'ai des divs enfants et mettre des divs enfants dans un h1 enfreint les règles, même si IE le rend, je ne suis pas sûr de ce que font les autres navigateurs
Jeremy

3

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
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.