É 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

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