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

Question

Comment pourrais-je sélectionner tous les enfants sauf le dernier à l'aide de sélecteurs CSS3?

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

Answer 1

Vous pouvez utiliser la négation pseudo-classe :not() contre le :last-child pseudo-classe . En tant que CSS Selectors Level 3, cela ne fonctionne pas dans IE8 ou une version antérieure:

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

Answer 2

Faites simple:

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

par exemple dansCSS:

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

ou dansSCSS:

.yourclass{
    border: 1px solid rgba(255, 255, 255, 1);
    &:last-child{
        border: 0;
    }
}

• facile à lire/à mémoriser
• rapide à exécuter
• compatible avec le navigateur (IE9 + puisqu'il est toujours CSS3)

Answer 3

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

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

Chris Coyier de CSS Tricks a réalisé un Nice : nième testeur pour cela.

Answer 4

Quand IE9 viendra, ce sera plus facile. La plupart du temps cependant, vous pouvez basculer le problème vers un problème nécessitant: premier enfant et appelez le côté opposé de l'élément (IE7 +).

Answer 5

Utiliser la solution de nick craver avec selectivizr permet une solution multi-navigateurs (IE6 +)

Answer 6

pour trouver des éléments de last, utilisez

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