Pseudoclase CSS :last-child
Aprende cómo funciona la pseudoclase CSS :last-child, en qué se diferencia de :last-of-type y ve ejemplos prácticos con listas, tablas y formularios.
La pseudoclase CSS :last-child selecciona un elemento que es el último hijo de su padre, es decir, el último hermano en la lista de hijos del padre. Se utiliza con más frecuencia para eliminar un borde final entre elementos de lista, restablecer el margen inferior del último párrafo o resaltar la fila final de una tabla.
Esta página explica cómo se evalúa :last-child, la regla crítica que sorprende a la mayoría de los desarrolladores, cómo se compara con :last-of-type y varios ejemplos ejecutables.
Cómo funciona :last-child
El selector p:last-child no significa "el último <p> del padre". Significa "un <p> que también es el último hijo absoluto de su padre". La posición se comprueba primero; el nombre de la etiqueta se comprueba después.
/* Matches the <p> ONLY when it is the final child of its parent */
p:last-child {
font-weight: bold;
}Considera este marcado:
<div>
<p>Paragraph — NOT selected.</p>
<span>I am the last child, so the rule above never fires.</span>
</div>Como <span> es el último hijo, p:last-child no coincide con nada aquí. Para seleccionar el último <p> independientemente de lo que le siga, usa :last-of-type en su lugar.
:last-child es la imagen especular de :first-child. Para contar desde el final (por ejemplo, el penúltimo), usa :nth-last-child().
En Selectors Level 3, el elemento coincidente debía tener un padre. Selectors Level 4 relaja esto: :last-child ahora puede coincidir con un elemento raíz que no tiene padre.
Sintaxis
selector:last-child {
/* declarations */
}:last-child puede combinarse con cualquier selector de elemento, clase o 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 */Ejemplo básico: párrafos
Los dos párrafos siguientes son hijos de <body>. p:last-child coincide solo con el segundo porque es el último hijo de su padre.
<!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>Ejemplo con lista: dar estilo al último <li>
li:last-child se aplica al último <li> dentro de cada <ul> o <ol> de forma independiente; las listas anidadas tienen su propio último hijo.
<!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>Múltiples párrafos dentro de un contenedor
Cuando cuatro elementos <p> son hermanos dentro del mismo padre, solo el cuarto coincide con 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 anidadas
:last-child se aplica de forma independiente en cada nivel de anidamiento. En el ejemplo siguiente, "List Item 3" es el último hijo del <ul> externo, y "List Item 3.3" es el último hijo del <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 comunes
Eliminar un separador final
Un patrón clásico: añadir un borde divisor a cada elemento y luego eliminarlo del último para que el grupo no termine con una línea colgante.
.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;
}Esto es más mantenible que añadir una clase manualmente al último <li>, porque el selector se adapta automáticamente cuando se agregan o eliminan elementos.
Eliminar el margen del último párrafo
Los bloques de contenido suelen necesitar espaciado entre párrafos pero no después del último; de lo contrario, el margen del párrafo se duplica con el relleno del contenedor.
.content p {
margin-bottom: 1rem;
}
.content p:last-child {
margin-bottom: 0;
}Dar estilo a la última fila de una tabla
table tr:last-child td {
font-weight: bold;
border-bottom: 2px solid #333;
}Esto resalta la fila de totales en una tabla de resumen sin añadir una clase al HTML.
:last-child vs :last-of-type
Estos dos selectores se confunden con frecuencia. La diferencia clave:
| Selector | Qué comprueba |
|---|---|
p:last-child | ¿Es este <p> el último hijo de su padre (por posición)? |
p:last-of-type | ¿Es este <p> el último <p> entre sus hermanos (por tipo, ignorando otros 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→ no coincide con nada (el último hijo es un<span>, no un<p>).p:last-of-type→ coincide con "Paragraph 2" (el último<p>entre los hermanos).
Usa :last-child cuando la posición importa. Usa :last-of-type cuando solo importa el tipo de elemento.
Especificidad
:last-child es una pseudoclase, por lo que contribuye con 0-1-0 a la especificidad, igual que un selector de clase. Los selectores combinados se acumulan normalmente:
li:last-child /* specificity: 0-1-1 (type + pseudo-class) */
.list li:last-child /* specificity: 0-2-1 (class + type + pseudo-class) */Compatibilidad con navegadores
:last-child es compatible con todos los navegadores modernos (Chrome, Firefox, Safari, Edge) y lo ha sido desde IE 9. No se necesita prefijo de proveedor ni alternativa.
Especificación
Selectores relacionados
:first-child— selecciona el primer hijo de su padre.:last-of-type— selecciona el último elemento de un tipo dado, ignorando otros tipos de elementos entre hermanos.:only-child— selecciona un elemento que es el único hijo de su padre.:nth-last-child()— selecciona elementos contando desde el final mediante una fórmula.:nth-child()— selecciona elementos contando desde el inicio mediante una fórmula.