: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.

css
/* 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

odd

Representa elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc., contando desde el final.

even

Representa elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc., contando desde el final.

Notación funcional

<An+B>

Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón An+B, para cada entero positivo o valor cero de n. El índice del primer elemento, contando desde el final, es 1. Los valores A y B deben ser ambos <integer>.

Sintaxis formal

Error: could not find syntax for this item

Ejemplos

Selectores de ejemplo

tr:nth-last-child(odd) o tr: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) o tr: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 selector p.

p:nth-last-child(1) or p: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

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

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

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

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

Ver también