O :last-childseletor permite que você direcione o último elemento diretamente dentro do elemento que o contém. É definido nas especificações dos seletores CSS de nível 3 como uma “pseudoclasse estrutural”, o que significa que é usado para estilizar o conteúdo com base em seu relacionamento com o conteúdo pai e irmão.
Suponha que temos um artigo e queremos diminuir o último parágrafo, para funcionar como uma conclusão para o conteúdo (como uma nota do editor):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
Em vez de usar uma classe (por exemplo .last), podemos usar :last-childpara selecioná-la:
p:last-child ( font-size: 0.75em; )Usar :last-childé muito semelhante a, :last-of-typemas com uma diferença crítica: é menos específico. :last-childirá apenas tentar corresponder ao último filho de um elemento pai, enquanto last-of-typeirá corresponder à última ocorrência de um elemento especificado, mesmo que não venha por último no HTML. No exemplo acima, o resultado seria o mesmo, apenas porque o último filho de articletambém passa a ser o último pelemento. Isso revela o poder de :last-child: pode identificar um elemento em relação a todos os seus irmãos, não apenas irmãos do mesmo tipo.
O exemplo mais completo abaixo demonstra o uso de :last-childe um seletor de pseudo-classe relacionado :first-child,.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nenhum | 3,2+ | Nenhum | 9,5+ | 9+ | Nenhum | Nenhum |
:last-childfoi introduzido no Módulo 3 dos seletores CSS, o que significa que as versões antigas dos navegadores não o suportam. No entanto, o suporte do navegador moderno é impecável, e os novos pseudo-seletores são amplamente usados em ambientes de produção. Se você precisar de suporte a um navegador mais antigo, use polyfill para IE ou use esses seletores de maneiras não críticas à melhoria progressiva, que é recomendada.