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

371

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

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

css-selectors css

— RyanScottLewis
fonte

689

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 */ }

— Nick Craver
fonte

isso é usado como está? Sem nada antes do primeiro cólon?

— johny why

você acrescentar isso ao seu seletor de base normal ( divno exemplo OP)

— Dallas

2

Para aqueles que usam o SASS, você pode usar &:not(:last-child) { /* styles * }dentro do elemento que deseja afetar.

— Martin James

100

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)

— Sebastien Horin
fonte

6

Para mim, pelo menos, isso tem um cheiro ruim de código. Você está aplicando conscientemente uma regra css a um elemento que não deseja, apenas para tentar endurecer outra camada para desfazê-la. Para mim, isso é um mau cheiro de código. Receio que esse tipo de codificação CSS possa levar a mais e mais difícil manter o CSS. Em outras palavras, você está criando um código de espaguete css.

— Alexander Bird

11

Isso também pode funcionar, mas o problema é que, quando você tem muitos estilos CSS, como (borda, cor, tamanho da fonte etc.), será necessário inicializar o estilo CSS novamente para: last-child. Portanto, a solução adequada está usando: not (: last-child)

— davecar21

33

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.

— Robin B
fonte

Mozilla tem uma definição bem de : nth-last-child

— Clint Pachl

11

Algumas pessoas dizem que o :notpseudo é muito caro. Portanto, pode ser uma boa ideia tentar evitá-lo sempre que possível.

— Neurotransmitter

22

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 +).

— Nicholas Wilson
fonte

10

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

— delphi
fonte

1

para encontrar elementos do último, use

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

— Avinash Malhotra
fonte

1

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 */
    },
  },
};

— maddRobot
fonte

1

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

este código deve aplicar o estilo a todos

exceto o último filho

— RyanGonzalezUSA
fonte