Ne pas sélectionner le premier enfant dans CSS
-
Utilisez le sélecteur
:not(selector)pour ne pas sélectionner le premier enfant en CSS -
Stylisez le premier enfant individuellement à l’aide du sélecteur
:first-childpour ne pas sélectionner le premier enfant dans CSS
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>
