Comment puis-je sélectionner tous les enfants d'un élément à l'exception du dernier enfant?

Comment puis-je sélectionner tous, mais le dernier enfant à l'aide des sélecteurs CSS3?

Par exemple, pour obtenir que le dernier enfant serait div:nth-last-child(1).

InformationsquelleAutor RyanScottLewis | 2010-04-04
  1. 612

    Vous pouvez utiliser le la négation de la pseudo-classe :non() contre la :dernier enfant pseudo-classe. Introduit Sélecteurs CSS Niveau 3, il ne fonctionne pas avec IE8 ou ci-dessous:

    :not(:last-child) { /* styles */ }
    • ce est utilisé comme tel? Sans rien avant le premier colon?
    • vous voudrais ajouter ceci à votre sélecteur de base (div dans l'OP exemple)
    • Pour ceux qui utilisent SASS, vous pouvez utiliser &:not(:last-child) { /* styles * } à l'intérieur de l'élément que vous souhaitez affecter.
    InformationsquelleAutor Nick Craver
  2. 95

    Faire simple:

    Vous pouvez appliquer à votre style de tous les div et de ré-initialiser le dernier avec :dernier enfant:

    par exemple dans CSS:

    .yourclass{
    border: 1px solid blue;
}
.yourclass:last-child{
    border: 0;
}

    ou dans SCSS:

    .yourclass{
    border: 1px solid rgba(255, 255, 255, 1);
    &:last-child{
        border: 0;
    }
}
    • facile à lire/rappelez-vous
    • rapide à exécuter
    • navigateur compatible (IE9+, car il est toujours CSS3)
    • Pour moi au moins, cela a une mauvaise odeur de code. Vous êtes sciemment l'application d'une règle css à un élément que vous ne voulez pas que ça, seulement pour ensuite essayer d'une autre couche de gâteau pour le défaire. Pour moi, c'est une mauvaise odeur de code. J'ai peur de ce genre de codage css peut conduire à de plus en plus difficile à maintenir css. En d'autres termes, vous êtes la construction de spaghetti code css.
    • cela pourrait aussi travailler, mais le problème, c'est quand vous avez beaucoup de style css comme (bordure, couleur, taille de police, etc.) vous devez initialiser le style css de nouveau à l' :dernier enfant. Donc la solution est d'utiliser :not(:dernier enfant)
    InformationsquelleAutor Sebastien Horin
  3. 29

    Nick Craver la solution fonctionne, mais vous pouvez également l'utiliser:

    :nth-last-child(n+2) { /* Your code here */ }

    Chris Coyier de CSS Astuces fait une belle :nth-testeur pour cela.

    • Mozilla a une bonne définition de la :nth-last-child
    • Élégant!...........
    • Certaines personnes disent que :not pseudo est très cher. Donc, il pourrait être une bonne idée d'essayer de l'éviter si possible.
    InformationsquelleAutor Robin B
  4. 22

    Quand IE9 vient, ce sera plus facile. Beaucoup de temps, vous pouvez passer le problème à un exigeant :d'abord l'enfant et le style et le côté opposé de l'élément (IE7+).

    InformationsquelleAutor Nicholas Wilson
  5. 10

    À l'aide de nick craver de la solution avec selectivizr permet un navigateur croix de solution (IE6+)

    InformationsquelleAutor delphi
  6. 0

    à trouver des éléments à partir de la fin, utiliser

    <style>
ul li:nth-last-of-type(3n){ color:#a94442}  /**/
</style>
    InformationsquelleAutor Avinash Malhotra