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

371

Comment pourrais-je sélectionner tout sauf le dernier enfant à l'aide des sélecteurs CSS3?

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

css-selectors css

— RyanScottLewis
source

690

Vous pouvez utiliser la pseudo-classe de négation:not() contre la :last-childpseudo-classe . Étant introduit CSS Selectors Level 3, il ne fonctionne pas dans IE8 ou ci-dessous:

:not(:last-child) { /* styles */ }

— Nick Craver
source

ceci est utilisé tel quel? Sans rien avant le premier colon?

— johny pourquoi

vous ajouteriez ceci à votre sélecteur de base normal ( divdans l'exemple OP)

— Dallas

2

Pour ceux qui utilisent SASS, vous pouvez utiliser l' &:not(:last-child) { /* styles * }intérieur de l'élément que vous souhaitez affecter.

— Martin James

100

Faites simple:

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

par exemple en 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 / à retenir
rapide à exécuter
compatible avec le navigateur (IE9 + car il est toujours CSS3)

— Sébastien Horin
source

6

Pour moi au moins, cela a une mauvaise odeur de code. Vous appliquez sciemment une règle css à un élément que vous ne voulez pas, puis essayez de créer un autre calque pour l'annuler. Pour moi, c'est une mauvaise odeur de code. Je crains que ce type de codage css puisse conduire à de plus en plus difficile à maintenir css. En d'autres termes, vous créez un code de spaghetti css.

— Alexander Bird

1

cela pourrait également fonctionner, mais le problème est que lorsque vous avez de nombreux styles CSS comme (bordure, couleur, taille de police, etc.), vous devrez réinitialiser le style CSS sur: last-child. Donc, la solution appropriée utilise: pas (: dernier enfant)

— davecar21

33

La solution de Nick Craver fonctionne mais vous pouvez également l'utiliser:

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

Chris Coyier de CSS Tricks a fait un bon : nième testeur pour cela.

— Robin B
source

Mozilla a une bonne définition de : n-dernier-enfant

— Clint Pachl

1

Certaines personnes disent que le :notpseudo coûte très cher. Il pourrait donc être judicieux d'essayer de l'éviter autant que possible.

— Neurotransmetteur

22

Quand IE9 arrivera, ce sera plus facile. Cependant, la plupart du temps, vous pouvez basculer le problème sur celui qui requiert: premier enfant et styliser le côté opposé de l'élément (IE7 +).

— Nicholas Wilson
source

10

L'utilisation de la solution de nick craver avec selectivizr permet une solution multi-navigateur (IE6 +)

— Delphes
source

1

pour trouver des éléments du dernier, utilisez

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

— Avinash Malhotra
source

1

La solution de Nick Craver m'a donné ce dont j'avais besoin mais pour le rendre explicite pour ceux qui utilisent CSS-in-JS:

const styles = {
  yourClass: {
    /* Styles for all elements with this class */
    '&:not(:last-child)': {
      /* Styles for all EXCEPT the last element with this class */
    },
  },
};

— maddRobot
source

1

.nav-menu li:not(:last-child){
    // write some style here
}

ce code doit appliquer le style à tous

sauf le dernier enfant

— RyanGonzalezUSA
source