:nth-last-child

Resumen

La pseudoclase de CSS :nth-last-child(an+b) selecciona un elemento que tiene an+b-1 hermanos después de él en el árbol del documento, si n tiene un valor positivo o cero y además tiene un elemento padre.

A efectos prácticos funciona igual que :nth-child excepto que selecciona los elementos empezando a contar por el final, en lugar de por el principio.

Ver :nth-child para una descripción más detallada de la sintaxis de este argumento.

Sintaxis

elemento:nth-last-child(an + b) { estilos }

Ejemplos

Ejemplo de selectores

tr:nth-last-child(-n+4)
Selecciona las cuatro últimas filas de una tabla HTML.
span:nth-last-child(even)
Selecciona los elementos pares dentro del elemento padre, empezando por el último elemento y contando del final hacia el principio.

Uso

Este CSS ...

table {
  border: 1px solid blue;
}
tr:nth-last-child(-n+3) { /* the last 3 siblings */
  background-color: lime;
}

... aplicado a este 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>

... da como resultado:

Especificaciones

Especificación Estado Comentario
Selectors Level 4
The definition of ':nth-last-child' in that specification.
Working Draft No change
Selectors Level 3
The definition of ':nth-last-child' in that specification.
Recommendation Initial definition

Compatibilidad entre navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4.0 3.5 (1.9.1) 9.0 9.5 3.2
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 1.0 (1.9.1) 9.0 10.0 3.2

 

Ver también

 

Etiquetas y colaboradores del documento

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