Ú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


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


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)

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");
});

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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.