Ú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.