J'ai une balise div
contenant plusieurs balises ul
.
Je ne peux définir les propriétés CSS que pour la première balise ul
:
div ul:first-child {
background-color: #900;
}
Cependant, mes tentatives suivantes pour définir les propriétés CSS de chacune des autres balises ul
, à l'exception de la première, ne fonctionnent pas :
div ul:not:first-child {
background-color: #900;
}
div ul:not(:first-child) {
background-color: #900;
}
div ul:first-child:after {
background-color: #900;
}
Comment puis-je écrire en CSS : "chaque élément, sauf le premier" ?
L'une des versions que vous avez publiées [fonctionne effectivement][1] pour tous les navigateurs modernes (où les [sélecteurs CSS de niveau 3][2] sont [pris en charge][3]) :
div ul:not(:first-child) {
background-color: #900;
}
Si vous devez prendre en charge les anciens navigateurs, ou si vous êtes gêné par la [limitation][4] du sélecteur :not
(il n'accepte qu'un [sélecteur simple][5] comme argument), vous pouvez utiliser une autre technique :
Définissez une règle qui a une portée plus grande que celle que vous souhaitez, puis "révoquez" cette règle de manière conditionnelle, en limitant sa portée à ce que vous souhaitez :
div ul {
background-color: #900; /* applies to every ul */
}
div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}
Pour limiter la portée, utilisez la [valeur par défaut][6] pour chaque attribut CSS que vous définissez.
[1] :
[2] : http://www.w3.org/TR/css3-selectors/ [3] : http://caniuse.com/#feat=css-sel3 [4] : http://www.w3.org/TR/css3-selectors/#negation [5] : http://www.w3.org/TR/css3-selectors/#simple-selectors-dfn [6] : http://www.w3.org/TR/CSS2/colors.html#background-propertiesCette solution CSS2 ("n'importe quel ul
après un autre ul
") fonctionne également, et est prise en charge par davantage de navigateurs.
div ul + ul {
background-color: #900;
}
Contrairement à :not
et :nth-sibling
, le sélecteur [adjacent sibling] (http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors) est pris en charge par IE7+.
Si vous avez JavaScript qui modifie ces propriétés après le chargement de la page, vous devriez examiner certains bogues connus dans les implémentations IE7 et IE8 de ceci. [Voir ce lien][1].
Pour toute page Web statique, cela devrait fonctionner parfaitement.
Comme :not
n'est pas accepté par IE6-8, je vous suggère ceci :
div ul:nth-child(n+2) {
background-color: #900;
}
Vous choisissez donc chaque ul
dans son élément parent sauf le premier.
Consultez l'article de Chris Coyer ["Useful :nth-child Recipes"][1] pour d'autres [exemples] nth-child
[1].