CSS :nth-last-child Pseudoclase
La pseudoclase CSS :nth-last-child() selecciona elementos desde el último hacia arriba. Aprende cómo usarla con ejemplos prácticos.
La pseudoclase :nth-last-child() selecciona elementos según su posición dentro de un grupo de hermanos, contando desde el último elemento hacia atrás. Es la imagen especular de :nth-child(): en lugar de contar desde el inicio, cuenta desde el final.
Esto la convierte en la herramienta adecuada cuando lo que importa es la distancia de un elemento desde el final de una lista — por ejemplo, para dar estilo al último elemento, a los últimos varios elementos, o a "todos los elementos excepto el último". Como el conteo comienza desde abajo, la regla sigue funcionando aunque se añadan o eliminen elementos al principio de la lista.
El argumento dentro de los paréntesis puede ser un número entero, una palabra clave (odd / even) o una fórmula An+B.
Diferencia con :nth-child()
Ambas pseudoclases cuentan entre hermanos, pero en direcciones opuestas:
:nth-child(1)selecciona el primer hermano.:nth-last-child(1)selecciona el último hermano (equivalente a:last-child).
Así, li:nth-last-child(2) siempre apunta al penúltimo elemento de la lista, sin importar cuántos elementos haya antes. Usa :nth-last-child() cuando tu estilo esté anclado al final del grupo en lugar del principio.
Nota:
:nth-last-child()cuenta todos los elementos hermanos independientemente del tipo. Si necesitas contar únicamente hermanos del mismo tipo de elemento (contando desde el final), usa:nth-last-of-type()en su lugar.
Valores de palabra clave
odd
Selecciona elementos con números de índice impares (por ejemplo, 1, 3, 5, 7, etc.).
even
Selecciona elementos con números de índice pares (por ejemplo, 2, 4, 6, 8, etc.).
Notación funcional
<An+B>
Selecciona elementos cuya posición numérica (contada desde el último hermano) coincide con el patrón An+B, evaluado para cada valor entero no negativo de n (0, 1, 2, …). El índice del último elemento es 1. A y B deben ser enteros y pueden ser negativos: A define el paso (longitud del patrón) y B define el desplazamiento.
Algunas fórmulas comunes, teniendo en cuenta la dirección del conteo:
| Fórmula | Coincide (contando desde el final) |
|---|---|
2n | Cada 2.º elemento (even) |
2n+1 | Cada otro elemento comenzando desde el último (odd) |
3 | Solo el 3.er elemento desde el final |
n+3 | El 3.er elemento desde el final y todo lo anterior |
-n+3 | Solo los últimos 3 elementos |
Versión
Sintaxis
Sintaxis CSS :nth-last-child
selector:nth-last-child() {
css declarations;
}Ejemplo del selector :nth-last-child():
Ejemplo CSS :nth-last-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-child(1) {
background-color: #1c87c9;
color: #fff;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Aquí p:nth-last-child(1) selecciona el párrafo que es el último hijo de su padre, por lo que solo el segundo párrafo obtiene el fondo azul.
Ejemplo con las palabras clave "odd" y "even":
Ejemplo de código CSS :nth-last-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-child(odd) {
background: #1c87c9;
color: #eee;
}
p:nth-last-child(even) {
background: #666;
color: #eee;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>Contando desde el final, el Párrafo 3 está en la posición 1 (impar), el Párrafo 2 en la posición 2 (par) y el Párrafo 1 en la posición 3 (impar). Por lo tanto, los Párrafos 1 y 3 utilizan la regla odd y el Párrafo 2 utiliza la regla even.
Ejemplo de :nth-last-child() con la etiqueta <table>:
Nota: Para que tr sea seleccionado, debe ser un hijo directo de tbody o table.
Ejemplo de código CSS :nth-last-child con la etiqueta table
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 1px solid #8EBF41;
border-spacing: 10px;
font-family: sans-serif;
}
table tr {
background-color: #cccccc;
}
/* Selects the last three elements */
tr:nth-last-child(-n+3) {
background-color: #8EBF41;
}
table tr td {
padding: 10px;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n+2) {
color: #ffffff;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 900;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<table>
<tbody>
<tr>
<td>First row</td>
</tr>
<tr>
<td>Second row</td>
</tr>
<tr>
<td>Third row</td>
</tr>
<tr>
<td>Fourth row</td>
</tr>
<tr>
<td>Fifth row</td>
</tr>
</tbody>
</table>
</body>
</html>Ejemplo de :nth-last-child() con la etiqueta <li>:
Ejemplo de código CSS :nth-last-child con la etiqueta ul
<!DOCTYPE html>
<html>
<head>
<style>
/* Selects the last three list items */
li:nth-last-child(-n+3),
li:nth-last-child(-n+3) ~ li {
color: #8EBF41;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<ol>
<li>List Item One</li>
<li>List Item Two</li>
</ol>
<ol>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
<li>List Item Five</li>
<li>List Item Six</li>
</ol>
</body>
</html>Observa que li:nth-last-child(-n+3) se combina con el selector de hermanos generales (~ li) para que los últimos tres elementos de la lista se resalten de forma fiable en todos los navegadores. En la segunda lista (seis elementos), los últimos tres — "Four", "Five" y "Six" — se vuelven verdes.
Selectores relacionados
:nth-child()— la misma idea, pero contando desde el primer hermano.:nth-of-type()— cuenta solo hermanos del mismo tipo de elemento, desde el inicio.:nth-last-of-type()— cuenta hermanos del mismo tipo desde el final.:last-child— un atajo equivalente a:nth-last-child(1).