Último filho do CSS (-1)

161

Estou procurando um seletor de css que permita selecionar o filho anterior da lista.

<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li> <!-- select the pre last item dynamically no matter how long this list is -->
     <li>6</li>
</ul>

Método estático:

ul li:nth-child(5)

Método dinâmico:

ul li:last-child(-1)

que obviamente não valida, o enésimo último filho não parece fornecer uma maneira dinâmica .. Posso usar o javascript, mas estou me perguntando se existe uma maneira de css que eu ignorei

Hedde van der Heide
fonte
11
É geralmente chamado de "segundo último". Há também outra palavra chique para isso: "penúltimo".
BoltClock
2
@BoltClock Adoro a palavra "penúltimo". Agora vou usá-lo em uma atualização sarcástica do Facebook.
Andrew Barber
3
Possível duplicado da Select penúltimo elemento com css
Castro Roy
2
Obrigado a todos que mencionaram o penúltimo - este foi o número 1 no Google por "penúltimo css".
chakeda

Respostas:

303

Você pode usar :nth-last-child(); na verdade, além disso :nth-last-of-type(), não sei mais o que você poderia usar. Não sei ao certo o que você quer dizer com "dinâmico", mas se você quer dizer se o estilo se aplica ao segundo segundo filho quando mais filhos forem adicionados à lista, sim. Violino interativo.

ul li:nth-last-child(2)
BoltClock
fonte
Ok, isso funciona! O interpretador de código (jsfiddle) não o validou .. Adivinhe um bug do lado deles! obrigado
Hedde van der Heide
4
@ David Allen: Eu não acho que ele se importa se ele já está tentando usar :nth-child(5)e :last-child. Comentários como esse devem ser colocados em questão ou mantidos em sigilo.
BoltClock
1
Ele pode não saber sobre o problema sem suporte. Estou apenas destacando-o .... Dei uma resposta usando o jQuery e ficarei feliz em dizer que ele não funcionará com usuários com o JavaScript desativado. mas mais pessoas usam IE7 / 8 do que ter JS diabled
David Allen
1
@ David, acredito que o selectivrz ou Modernizr plugin pode corrigir esse problema, eu vou ter que ver os docs
Hedde van der Heide
@ArgsKwargs Great Comment nunca ouviu falar de selectivizr. Deixe-nos saber se ele faz suporte nth-last-child
David Allen
1

A menos que você consiga que o PHP rotule esse elemento com uma classe, é melhor usar o jQuery.

jQuery(document).ready(function () {
  $count =  jQuery("ul li").size() - 1;
  alert($count);
  jQuery("ul li:nth-child("+$count+")").css("color","red");
});
David Allen
fonte
6
É absolutamente irritante que o jQuery não implemente :nth-last-child()apenas porque John acha que ninguém o usa .
BoltClock
Eu prefiro etiqueta com python ;-) ontopic: Bem css parece bem desta forma, talvez jsFiddle também acha que ninguém usa :-)
Hedde van der Heide
@ArgsKwargs: Estranho por que não funcionaria no jsFiddle. Cabe ao navegador interpretá-lo; não possui seu próprio mecanismo CSS.
BoltClock
@BoltClock não me interpretem mal, não trabalho, o ajudante de código (visualização da cor) apenas indica que algo não fechada (por isso nem sequer tentar)
Hedde van der Heide
Eu não acho que nenhum código esteja fechado. Mas eu sei o que dizer sobre a "visualização da cor"
David Allen