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


j'ai div tag contenant plusieurs ul Mots clés.

Si j'essaie de définir les propriétés CSS uniquement pour le premier ul tag, et ce code fonctionne:

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

Quand je veux définir les propriétés CSS pour chaque ul tag sauf le premier, 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 pour aucun effet. Comment dois-je écrire en CSS: "chaque élément, sauf le premier"?


579
2017-09-05 21:09


origine


Réponses:


Une des versions que vous avez postées fonctionne réellement pour tous les navigateurs modernes (où Sélecteurs CSS niveau 3 sont prise en charge):

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

Si vous devez prendre en charge les navigateurs existants ou si vous êtes gêné par le :not sélecteur limitation (il n'accepte qu'un sélecteur simple comme argument) alors vous pouvez utiliser une autre technique:

Définissez une règle qui a une plus grande portée que celle que vous avez l'intention de "révoquer" conditionnellement, en limitant sa portée à 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 */
}

En limitant la portée, utilisez le valeur par défaut pour chaque attribut CSS que vous définissez.


982
2017-09-05 21:11



Cette solution CSS2 ("any ul après un autre ul") fonctionne aussi, et est supporté par plus de navigateurs.

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

contrairement à :not et :nth-sibling, la Sélecteur de frère adjacent est supporté par IE7 +.

Si tu as JavaScript change ces propriétés après le chargement de la page, vous devriez regarder quelques bogues connus dans le IE7 et IE8 implémentations de cela. Voir ce lien.

Pour toute page Web statique, cela devrait fonctionner parfaitement.


131
2018-03-19 21:33



Eh bien depuis :not n'est pas accepté par IE6 ~ 8, Je vous suggère ceci:

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

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

Reportez-vous à Chris Coyer "Utile: Recettes nth-enfant" article pour plus nth-child  exemples.


56
2018-02-22 21:07



div li~li {
    color: red;
}

Supporte IE7


14
2017-10-16 11:10



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

Au lieu de cela, essayez ceci:

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

3
2017-08-19 16:36