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

html css css-selectors

— 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

"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

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

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

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.

:nth-child Suporte do navegador

Mostrar snippet de código

#container :nth-last-child(-n+2) {
  background-color: cyan;
}

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

Expandir snippet

— kapa
fonte

Legal, minha resposta seleciona apenas o último filho menos 1. Não sabia disso. + 'd

— rsplak 24/03