CSS :last-child Pseudo Classe
Aprenda como funciona a pseudo-classe CSS :last-child, suas diferenças em relação a :last-of-type e veja exemplos práticos com listas, tabelas e formulários.
A pseudo-classe CSS :last-child seleciona um elemento que é o último filho do seu elemento pai — ou seja, o último irmão na lista de filhos do pai. É usada com mais frequência para remover a borda final entre itens de lista, redefinir a margem inferior do último parágrafo ou destacar a última linha de uma tabela.
Esta página explica como o :last-child é avaliado, a regra crítica que pega a maioria dos desenvolvedores de surpresa, como ele se compara ao :last-of-type e apresenta vários exemplos executáveis.
Como o :last-child funciona
O seletor p:last-child não significa "o último <p> no pai." Significa "um <p> que também é o último filho do seu pai." A posição é verificada primeiro; o nome da tag é verificado depois.
/* Matches the <p> ONLY when it is the final child of its parent */
p:last-child {
font-weight: bold;
}Considere esta marcação:
<div>
<p>Paragraph — NOT selected.</p>
<span>I am the last child, so the rule above never fires.</span>
</div>Como <span> é o último filho, p:last-child não corresponde a nada aqui. Para selecionar o último <p> independentemente do que vem depois, use :last-of-type.
:last-child é a imagem espelhada de :first-child. Para contar a partir do fim (por exemplo, o penúltimo), use :nth-last-child().
No Selectors Level 3, o elemento selecionado precisava ter um pai. O Selectors Level 4 relaxa essa exigência: :last-child agora pode corresponder a um elemento raiz sem pai.
Sintaxe
selector:last-child {
/* declarations */
}:last-child pode ser combinado com qualquer seletor de elemento, classe ou ID:
li:last-child { border-bottom: none; } /* last <li> in its parent */
.card:last-child { margin-bottom: 0; } /* last element with class .card */
tr:last-child td { font-weight: bold; } /* cells in the last table row */Exemplo básico: parágrafos
Os dois parágrafos abaixo são filhos de <body>. O p:last-child corresponde apenas ao segundo porque ele é o último filho do seu pai.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:last-child {
background-color: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<h2>Last-child selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Exemplo com lista: estilizando o último <li>
li:last-child aplica-se ao último <li> dentro de cada <ul> ou <ol> de forma independente — listas aninhadas têm seu próprio último filho.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:last-child {
background: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<h2>:last-child selector example</h2>
<ul>
<li>Paris</li>
<li>Moscow</li>
<li>Rome</li>
</ul>
<ol>
<li>Paris</li>
<li>Moscow</li>
<li>Rome</li>
</ol>
</body>
</html>Vários parágrafos dentro de um contêiner
Quando quatro elementos <p> são irmãos dentro do mesmo pai, apenas o quarto corresponde a p:last-child.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:last-child {
background: #8ebf42;
color: #ffffff;
}
</style>
</head>
<body>
<h2>:last-child selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</body>
</html>Listas aninhadas
:last-child aplica-se de forma independente em cada nível de aninhamento. No exemplo abaixo, "List Item 3" é o último filho do <ul> externo e "List Item 3.3" é o último filho do <ul> interno.
<!DOCTYPE html>
<html>
<head>
<style>
ul li {
color: #8ebf42;
}
ul li:last-child {
border: 1px dotted #8ebf42;
color: #1c87c9;
}
</style>
</head>
<body>
<h2>:last-child selector example</h2>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>
List Item 3
<ul>
<li>List Item 3.1</li>
<li>List Item 3.2</li>
<li>List Item 3.3</li>
</ul>
</li>
</ul>
</body>
</html>Casos de uso comuns
Removendo um separador final
Um padrão clássico: adicionar uma borda divisória a cada item e removê-la do último para que o grupo não termine com uma linha solta.
.menu li {
border-bottom: 1px solid #ccc;
padding: 8px 0;
}
/* Remove the bottom border from the final item */
.menu li:last-child {
border-bottom: none;
}Isso é mais fácil de manter do que adicionar uma classe manualmente ao último <li>, pois o seletor se adapta automaticamente quando itens são adicionados ou removidos.
Removendo a margem do último parágrafo
Blocos de conteúdo frequentemente precisam de espaçamento entre parágrafos, mas não após o último — caso contrário, a margem do parágrafo se soma ao padding do contêiner.
.content p {
margin-bottom: 1rem;
}
.content p:last-child {
margin-bottom: 0;
}Estilizando a última linha de uma tabela
table tr:last-child td {
font-weight: bold;
border-bottom: 2px solid #333;
}Isso destaca a linha de totais em uma tabela de resumo sem adicionar uma classe ao HTML.
:last-child vs :last-of-type
Esses dois seletores são frequentemente confundidos. A diferença principal:
| Seletor | O que verifica |
|---|---|
p:last-child | Este <p> é o último filho do seu pai (por posição)? |
p:last-of-type | Este <p> é o último <p> entre seus irmãos (por tipo, ignorando outros elementos)? |
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p> <!-- p:last-of-type matches here -->
<span>A span</span> <!-- this is the last child -->
</div>p:last-child→ não corresponde a nada (o último filho é um<span>, não um<p>).p:last-of-type→ corresponde a "Paragraph 2" (o último<p>entre os irmãos).
Use :last-child quando a posição importa. Use :last-of-type quando apenas o tipo do elemento importa.
Especificidade
:last-child é uma pseudo-classe, portanto contribui com 0-1-0 para a especificidade — o mesmo que um seletor de classe. Seletores combinados acumulam normalmente:
li:last-child /* specificity: 0-1-1 (type + pseudo-class) */
.list li:last-child /* specificity: 0-2-1 (class + type + pseudo-class) */Suporte a navegadores
:last-child é suportado em todos os navegadores modernos (Chrome, Firefox, Safari, Edge) e tem suporte desde o IE 9. Nenhum prefixo de fornecedor ou fallback é necessário.
Especificação
Seletores relacionados
:first-child— seleciona o primeiro filho do seu pai.:last-of-type— seleciona o último elemento de um determinado tipo, ignorando outros tipos de elementos entre os irmãos.:only-child— seleciona um elemento que é o único filho do seu pai.:nth-last-child()— seleciona elementos contando a partir do final usando uma fórmula.:nth-child()— seleciona elementos contando a partir do início usando uma fórmula.