Selecione o segundo último elemento com css

135

Eu já sei: último filho. Mas existe uma maneira de selecionar a div:

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div> <!-- THIS -->
 <div>c</div>
</div>

NOTA: sem jQuery, apenas com CSS

dinâmico
fonte
Certamente há alguma lógica sobre por que o segundo filho é significativo?
David Tang
sim eu preciso selecionar os dois últimos e penúltimo para aplicar alguns estilos
dinâmica
por que você não pode simplesmente colocar uma classe no 2º última div
Daveo
3
"por que você não pode simplesmente colocar uma classe na 2ª última div": talvez se você conseguir estilizar o conteúdo que está sendo gerado, no qual você não tem acesso (fácil) para adicionar uma classe ao segundo último item?
Henrik

Respostas:

271

No CSS3 você tem:

:nth-last-child(2)

Veja: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

nésimo último filho suporte ao navegador:

  • Chrome 2
  • Firefox 3.5
  • Opera 9.5, 10
  • Safari 3.1, 4
  • Internet Explorer 9
Z gelado
fonte
1
Este é provavelmente o caminho a menos, a menos que você possa anexar uma classe à div que você está tentando selecionar. Como o Frosty mencionou, o CSS3 não é suportado por navegadores mais antigos ou pelo IE. O Jquery é uma opção muito melhor se você estiver preocupado com a computação entre navegadores.
Thomas
Era uma cópia / pasta do artigo vinculado ... Resposta editada, obrigado.
gelado Z
1
solução em css: #container>: nth-last-child (2) {background: red;} Verifique este código para vê-lo ao vivo: codepen.io/marc_dahan/pen/JyxObz
marcdahan
Agora que não precisamos oferecer suporte ao IE mais antigo, essa resposta funcionará perfeitamente. Honestamente, se as pessoas ainda estão usando o IE 8 e abaixo, elas não merecem ter coisas bonitas.
Stender
59

Nota: Poste esta resposta porque o OP afirmou posteriormente nos comentários que ele precisa selecionar os dois últimos elementos , não apenas o penúltimo.


O :nth-childseletor CSS3 é de fato mais capaz do que você jamais imaginou!

Por exemplo, isso selecionará os 2 últimos elementos de #container:

#container :nth-last-child(-n+2) {}

Mas este é apenas o começo de uma bela amizade.

kapa
fonte
Legal, minha resposta seleciona apenas o último filho menos 1. Não sabia disso. + 'd
rsplak 24/03