É possível selecionar os últimos n itens com o enésimo filho?

130

Usando uma lista padrão, estou tentando selecionar os dois últimos itens da lista. Eu tenho várias permutações de, An+Bmas nada parece selecionar os dois últimos:

li:nth-child(n+2) {} /* selects from the second onwards */
li:nth-child(n-2) {} /* selects everything */
li:nth-child(-n+2) {} /* selects first two only */
li:nth-child(-n-2) {} /* selects nothing */

Estou ciente de alguns novos seletores CSS3 como, :nth-last-child()mas prefiro algo que funcione em mais alguns navegadores, se possível (não me importo particularmente com o IE).

css css-selectors DisgruntledGoat
fonte
5
Não obstante, no IE, o suporte ao navegador :nth-last-child()é praticamente o mesmo de :nth-child() acordo com quirksmode.org . Além disso, :nth-child()e :nth-last-child()foram introduzidos no CSS3, nenhum deles é mais antigo ou mais novo nesse sentido.
BoltClock
Muitos nth-childtruques úteis são resumidos por css-tricks
m7913d

Respostas:

273

Isso selecionará os dois últimos itens de uma lista:

li:nth-last-child(-n+2) {color:red;}
<ul>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
</ul>
Expandir snippet

John Guise
fonte
Sim, mas você está usando o :nth-last-child()que já foi mencionado.
BoltClock
6
(-n + 2) => É isso que estou procurando. Obrigado
Surjith SM
16
Esta deve ser a resposta aceita, sim, nth-last-child foi já mencionado, mas não exatamente como (-N + b) é um truque legal
BlackTigerX
56

nth-last-childParece que ele foi projetado especificamente para resolver esse problema, então eu duvido que exista uma alternativa mais compatível. O suporte parece bastante decente , no entanto.

Pekka
fonte
Obrigado pelo link - parece que o suporte do enésimo filho é realmente o mesmo que o enésimo último filho (eu tinha certeza que o IE8 suportava o enésimo filho, mas talvez não).
usar o seguinte
14

:nth-last-child(-n+2) deve fazer o truque

Danyl Sobolev
fonte
1

Devido à definição da semântica de nth-child, não vejo como isso é possível sem incluir o comprimento da lista de elementos envolvidos. O objetivo da semântica é permitir a segregação de vários elementos filhos em grupos repetidos ( editar - graças ao BoltClock) ou em uma primeira parte de algum comprimento fixo, seguida por "o resto". Você meio que quer o oposto disso, que é o que nth-last-childlhe dá.

Pontudo
fonte
1
Com :nth-child()você pode selecionar os primeiros melementos especificando :nth-child(-n+m).
BoltClock
@BoltClock Eu vou ter que pensar nisso por um segundo ... oh, bem, sim, você está certo sobre isso. É evidente que eu não sou em grande parte da posição de fazer um pronunciamento séria sobre qual é a intenção do comitê foi quando inventando seletores CSS3 qualquer maneira :-)
Pointy
-2

Se você estiver usando o jQuery em seu projeto, ou estiver disposto a incluí-lo, poderá chamar nth-last-childpor meio da API do seletor (isso é simulado, ele cruzará o navegador). Aqui está um link para um nth-last-childplugin. Se você adotou esse método de segmentação dos elementos nos quais estava interessado:

$('ul li:nth-last-child(1)').addClass('last');

E, em seguida, estilize novamente a lastclasse em vez dos pseudo-seletores nth-childou nth-last-child, você terá uma experiência entre navegadores muito mais consistente.

Nathan Anderson
fonte