:last-child
La pseudo-clase :last-child de CSS representa el último elemento entre un grupo de elementos hermanos.
/* Selecciona cualquier <p> que sea el último elemento
entre sus hermanos */
p:last-child {
color: lime;
}Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.
Sintaxis
:last-child
Ejemplo
Ejemplo básico
HTML
<div>
<p>Este texto no está seleccionado.</p>
<p>¡Este texto está seleccionado!</p>
</div>
<div>
<p>Este texto no está seleccionado.</p>
<h2>Este texto no está seleccionado: no es un `p`.</h2>
</div>
CSS
p:last-child {
color: lime;
background-color: black;
padding: 5px;
}
Resultado
Diseñando una lista
HTML
<ul>
<li>Artículo 1</li>
<li>Artículo 2</li>
<li>Artículo 3
<ul>
<li>Artículo 3.1</li>
<li>Artículo 3.2</li>
<li>Artículo 3.3</li>
</ul>
</li>
</ul>CSS
ul li {
color: blue;
}
ul li:last-child {
border: 1px solid red;
color: red;
}Resultado
Especificaciones
| Especificación | Estado | Comentarios |
|---|---|---|
| Selectors Level 4 La definición de ':last-child' en esta especificación. |
Working Draft | Los elementos coincidentes no requieren tener un padre. |
| Selectors Level 3 La definición de ':last-child' en esta especificación. |
Recommendation | Definición Inicial. |
Compatibilidad con navegadores
BCD tables only load in the browser