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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.