Como posso selecionar todos os filhos de um elemento, exceto o último filho?

Como selecionaria todos, exceto o último filho, usando seletores CSS3?

Por exemplo, obter apenas o último filho seria div:nth-last-child(1) .

Você pode usar a pseudo classe de negação:not() contra a :last-childpseudo classe . Sendo introduzido o nível 3 dos seletores CSS, ele não funciona no IE8 ou abaixo:

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

Simplifique:

Você pode aplicar seu estilo a toda a div e reinicializar a última com : last-child :

por exemplo em CSS :

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

ou no SCSS :

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

• fácil de ler / lembrar
• rápido de executar
• compatível com navegador (IE9 +, pois ainda é CSS3)

A solução de Nick Craver funciona, mas você também pode usar isso:

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

Chris Coyier, do CSS Tricks, fez um ótimo : enésimo testador para isso.

Quando o IE9 chegar, será mais fácil. Muitas vezes, porém, você pode mudar o problema para um que exija: primeiro filho e estilizar o lado oposto do elemento (IE7 +).

O uso da solução de nick craver com o selectivizr permite uma solução entre navegadores (IE6 +)

para encontrar elementos do último, use

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

A solução de Nick Craver me deu o que eu precisava, mas para deixar explícito para quem usa 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 */
    },
  },
};

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

este código deve aplicar o estilo a todos