:last-child
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
* Some parts of this feature may have varying levels of support.
La pseudo-clase :last-child de CSS representa el último elemento entre un grupo de elementos hermanos.
css
/* 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
Error: could not find syntax for this itemEjemplo
Ejemplo básico
HTML
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
css
p:last-child {
color: lime;
background-color: black;
padding: 5px;
}
Resultado
Diseñando una lista
HTML
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
css
ul li {
color: blue;
}
ul li:last-child {
border: 1px solid red;
color: red;
}
Resultado
Especificaciones
| Specification |
|---|
| Selectors Level 4 # the-last-child-pseudo |
Compatibilidad con navegadores
Loading…