HOWTO · CSS
Ne pas sélectionner le premier enfant dans CSS
Cet article explique les moyens de ne pas sélectionner le premier enfant dans CSS
Sur cette page
Dans cet article, nous allons apprendre à utiliser les sélecteurs CSS pour ne pas sélectionner le premier enfant.
Utilisez le sélecteur :not(selector) pour ne pas sélectionner le premier enfant en CSS
Nous pouvons utiliser le sélecteur :not(selector) pour sélectionner tout autre élément qui n’est pas l’élément sélectionné. Ainsi, nous pouvons utiliser le sélecteur pour ne pas sélectionner le premier enfant en CSS. Nous pouvons utiliser :first-child comme sélecteur dans le sélecteur :not(selector). De cette façon, nous pouvons appliquer des styles à tous les descendants d’un élément sauf le premier. Ici, dans les navigateurs avec CSS Selectors level 3 pris en charge, nous pouvons utiliser le sélecteur :not.
Par exemple, créez la balise body en HTML. Ensuite, écrivez trois balises p et écrivez un contenu de votre choix entre les balises. Dans CSS, sélectionnez body p:not(:first-child) et définissez la color sur red.
Ici, dans l’extrait ci-dessous, nous pouvons voir que le corps contient des paragraphes, et tous ont leur couleur de police définie sur rouge, sauf le premier. Ainsi, nous pouvons sélectionner tous les enfants à l’exception du premier enfant et appliquer des styles. Le sélecteur :not, cependant, a certaines limitations (par exemple, il ne peut traiter que des sélecteurs simples comme argument).
Exemple de code :
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
body p:not(:first-child) {
color: red;
}
Stylisez le premier enfant individuellement à l’aide du sélecteur :first-child pour ne pas sélectionner le premier enfant dans CSS
Nous pouvons définir des règles spécifiques qui remplacent la règle précédemment définie à l’aide du sélecteur :first-child. Par cette technique, nous pouvons styliser tous les enfants sauf le premier enfant. Remplacer les styles à l’aide du sélecteur :first-child fera apparaître le premier enfant différent des autres enfants.
Par exemple, utilisez la même structure HTML que dans la première méthode. En CSS, sélectionnez la balise p et définissez la color sur bleu. Ensuite, sélectionnez le premier enfant comme body p:first-child, puis définissez la color sur black.
Ici, le style par défaut des paragraphes, à l’exception du premier, est défini sur color: blue, alors qu’il est remplacé par color: black à l’aide du sélecteur :first-child. Ainsi, on peut utiliser le sélecteur :first-child pour ne pas sélectionner le premier enfant.
Exemple de code :
p{
color:blue;
}
body p:first-child {
color: black;
}
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
