Comment puis-je utiliser un sélecteur non: first-child?

J’ai une balise div contenant plusieurs balises ul .

Si j’essaie de définir les propriétés CSS uniquement pour la première balise ul , et que ce code fonctionne:

 div ul:first-child { background-color: #900; }

Lorsque je veux définir les propriétés CSS pour chaque balise ul sauf la première, j’ai essayé ceci:

 div ul:not:first-child { background-color: #900; }

aussi ceci:

 div ul:not(:first-child) { background-color: #900; }

et ça:

 div ul:first-child:after { background-color: #900; }

Mais sans effet. Comment dois-je écrire en CSS: “chaque élément, sauf le premier”?

L’une des versions que vous avez publiées fonctionne pour tous les navigateurs modernes (où les sélecteurs CSS de niveau 3 sont pris en charge ):

 div ul:not(:first-child) { background-color: #900; }

Si vous avez besoin de prendre en charge les navigateurs existants, ou si vous êtes gêné par la limitation :not sélecteur (il accepte un simple sélecteur comme argument), vous pouvez utiliser une autre technique:

Définissez une règle qui a une scope plus grande que celle que vous avez l’intention de “révoquer” ensuite, en limitant sa scope à ce que vous avez l’intention de faire:

 div ul { background-color: #900; /* applies to every ul */ } div ul:first-child { background-color: transparent; /* limits the scope of the previous rule */ }

Lorsque vous limitez l’étendue, utilisez la valeur par défaut pour chaque atsortingbut CSS que vous définissez.

Cette solution CSS2 (“tout ul après un autre ul “) fonctionne aussi, et est supscope par plus de navigateurs.

 div ul + ul { background-color: #900; }

Contrairement à :not et :nth-sibling , le sélecteur de frère adjacent est pris en charge par IE7 +.

Si JavaScript modifie ces propriétés après le chargement de la page, vous devez examiner certains bogues connus dans les implémentations IE7 et IE8 . Voir ce lien .

Pour toute page Web statique, cela devrait fonctionner parfaitement.

Bien depuis :not accepté par IE6 ~ 8 , je vous suggère ceci:

 div ul:nth-child(n+2) { background-color: #900; }

Donc, vous choisissez chaque ul dans son élément parent, sauf le premier .

Reportez-vous à l’article de Chris Coyer sur les “Recettes utiles” pour plus d’ exemples d’ nth-child .

 div li~li { color: red; }

Prend en charge IE7

not(:first-child) ne semble plus fonctionner. Au moins avec les versions plus récentes de Chrome et de Firefox.

Essayez plutôt ceci:

 ul:not(:first-of-type) {}

Je n’ai pas eu de chance avec certains de ces points,

C’était le seul qui fonctionnait réellement pour moi

ul:not(:first-of-type) {}

Cela a fonctionné pour moi lorsque j’essayais que le premier bouton affiché sur la page ne soit pas affecté par une option de marge gauche.

c’était l’option que j’ai essayée en premier mais ça n’a pas marché

ul:not(:first-child)