:nth-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 July 2015.
La pseudo-clase :nth-last-child()
de CSS selecciona uno o más elementos en función de su posición entre un grupo de hermanos, contando desde el final.
/* Selecciona cada cuarto elemento entre
cualquier grupo de hermanos, contando
hacia atrás desde el último */
:nth-last-child(4n) {
color: lime;
}
Nota:
Esta pseudo-clase es esencialmente la misma que :nth-child
, excepto que cuenta los elementos hacia atrás desde el final, no hacia adelante desde el principio.
Sintaxis
La pseudo-clase nth-last-child
se especifica con un solo argumento, que representa el patrón para los elementos coincidentes, contando desde el final.
Valores de palabras clave
Notación funcional
Sintaxis formal
Error: could not find syntax for this item
Ejemplos
Selectores de ejemplo
tr:nth-last-child(odd)
otr:nth-last-child(2n+1)
-
Representa las filas impares de una tabla HTML: 1, 3, 5, etc., contando desde el final.
tr:nth-last-child(even)
otr:nth-last-child(2n)
-
Representa las filas pares de una tabla HTML: 2, 4, 6, etc., contando desde el final.
:nth-last-child(7)
-
Representa el séptimo elemento, contando desde el final.
:nth-last-child(5n)
-
Representa los elementos 5, 10, 15, etc., contando desde el final.
:nth-last-child(3n+4)
-
Representa los elementos 4, 7, 10, 13, etc., contando desde el final.
:nth-last-child(-n+3)
-
Representa los últimos tres elementos entre un grupo de hermanos.
p:nth-last-child(n)
-
Representa cada elemento
<p>
entre un grupo de hermanos. Esto es lo mismo que un simple selectorp
. p:nth-last-child(1)
orp:nth-last-child(0n+1)
-
Representa cada
<p>
que es el primer elemento entre un grupo de hermanos, contando desde el final. Esto es lo mismo que el selector:last-child
.
Ejemplo de tabla
HTML
<table>
<tbody>
<tr>
<td>Primera línea</td>
</tr>
<tr>
<td>Segunda línea</td>
</tr>
<tr>
<td>Tercera línea</td>
</tr>
<tr>
<td>Cuarta línea</td>
</tr>
<tr>
<td>Quinta línea</td>
</tr>
</tbody>
</table>
CSS
table {
border: 1px solid blue;
}
/* Selecciona los últimos tres elementos */
tr:nth-last-child(-n + 3) {
background-color: pink;
}
/* Toma todos los elementos a partir del penúltimo elemento */
tr:nth-last-child(n + 2) {
color: blue;
}
/* Seleccione solo el penúltimo elemento */
tr:nth-last-child(2) {
font-weight: 600;
}
Resultado
Ejemplo de caso Edge
Como n
comienza en cero, mientras que el último elemento comienza en uno, n
y n+1
seleccionarán los mismos elementos.
HTML
<table>
<tbody>
<tr>
<td>Primera línea</td>
</tr>
<tr>
<td>Segunda línea</td>
</tr>
<tr>
<td>Tercera línea</td>
</tr>
</tbody>
</table>
CSS
tr:nth-last-child(n) {
background-color: lightgray;
}
tr:nth-last-child(n + 1) {
font-weight: 600;
}
Resultado
Especificaciones
Specification |
---|
Selectors Level 4 # nth-last-child-pseudo |
Compatibilidad con navegadores
BCD tables only load in the browser