CSS3 :nth-last-child()Selectores

CSS完整选择器 Manual de referencia completo de selectores CSS

Ejemplos

Especifica el color de fondo de cada elemento p que coincida con el penúltimo elemento hermano del mismo tipo.

p:nth-last-child(2) { background:#ff0000; }

Definición y uso

El selector :nth-last-child(n) selecciona cada elemento que sea el enésimo hijo de su elemento padre, sin importar el tipo de elemento, contando desde el último hijo.

nPuede ser un número, una palabra clave o una fórmula.

Consejo:Consulte también :nth-last-of-type()Selector. Este selector coincide con el enésimo elemento hijo estructural desde el final en el elemento padre.

Soporte del navegador

Los números de la tabla indican la primera versión del navegador que admite esta propiedad.

Selector
:nth-last-child()	4.0	9.0	3.5	3.2	9.6

Más ejemplos

Ejemplo 1

Los números impares y pares se pueden usar como palabras clave para hacer coincidir elementos hijos cuyo índice sea impar o par.

Aquí, especificamos dos colores de fondo diferentes para los elementos p impares y pares contando desde el final.

p:nth-last-child(odd)
{
background:#ff0000;
}
p:nth-last-child(even)
{
background:#0000ff;
}

Pruébalo »

Ejemplo 2

Usando la fórmula (an + b). Descripción: a representa el tamaño de un ciclo, n es un contador (que comienza desde 0) y b es el desplazamiento.

Aquí, especificamos el color de fondo para todos los elementos p cuyo índice sea múltiplo de 3, contando desde el final.

p:nth-last-child(3n+0)
{
background:#ff0000;
}