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

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

:nth-last-child( <nth> [ of <selector># ]? )

where
<nth> = <an-plus-b> | even | odd

Ejemplos

Selectores de ejemplo

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

<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

Especificación Estado Comentarios
Selectors Level 4
La definición de ':nth-last-child' en esta especificación.
Working Draft Los elementos coincidentes no requieren tener un padre.
Selectors Level 3
La definición de ':nth-last-child' en esta especificación.
Recommendation Definición Inicial.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 4Edge Soporte completo SiFirefox Soporte completo 3.5IE Soporte completo 9Opera Soporte completo 9Safari Soporte completo 3.2WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo 10Safari iOS Soporte completo 3.2Samsung Internet Android Soporte completo Si
of <selector> syntaxChrome Sin soporte NoEdge ? Firefox Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 854148.
IE ? Opera ? Safari Soporte completo 9WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 854148.
Opera Android ? Safari iOS Soporte completo 9Samsung Internet Android Sin soporte No
Matches elements with no parentChrome Soporte completo 57Edge ? Firefox Soporte completo 52IE ? Opera Soporte completo 44Safari ? WebView Android Soporte completo 57Chrome Android Soporte completo 57Edge Mobile ? Firefox Android Soporte completo 52Opera Android Soporte completo 44Safari iOS ? Samsung Internet Android Soporte completo 7.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
Ver notas de implementación.
Ver notas de implementación.

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: lajaso, alkaithil
Última actualización por: lajaso,