NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Selector CSS : :nth-last-child

30 de Diciembre del 2020 por Josep Antoni Bover. 0 visitas, 0 comentarios, 0 votos
Categorías : CSS.
La web está en segundo plano, animación en pausa.
Cargando animación...

El selector nth-last-child se puede utilizar de varias maneras, pero siempre pensando en una estructura de arból en la que queremos buscar elementos con ciertas caracteristicas agrupandolos por su nodo padre.

El mas sencillo es es el de posición, si por ejemplo quieres apuntar a la penultima etiqueta 'p' que pertenecen a objetos con una clase especifica, puedes utilizar .ClaseEspecifica > p:nth-last-child(2) { ... }.

Luego tenemos los valores 'even' (pares) y 'odd' (impares), que por ejemplo se utilizan en tablas con muchos datos para cambiar el color del fondo de las celdas, y asi poder diferenciar mejor las filas y columnas.

Tambien se puede utilizar una fórmula para obtener elementos en una posición multiple del valor especificado.

Y por último se puede utilizar para seleccionar N elementos empezando desde el último.


Sintaxis

:nth-last-child( Posición ) { };
:nth-last-child( even | odd ) { };
:nth-last-child( An+B ) { };
:nth-last-child( -n+B ) { };

/* Posición única. */
/* pares / impares. */
/* Multiples de 'A' + 'B'. */
/* Desde el ultimo hijo hasta 'B'. */



Posición Especifica el elemento, los elementos empiezan desde 1. Solo se permiten posiciones mayores que 0.
even Elementos pares (2, 4, 6, 8, etc...).
odd Elementos impares (1, 3, 5, 7, etc...).
An+B Fórmula : la 'A' es el avance, y la 'B' es el inicio (por defecto 0). Para la 'A' no se permiten números negativos, para la 'B' si que se permiten números negativos.
Por ejemplo podemos crear una formúla que escoja los multiples de 3 sumandole 1 (3n+1), y esto resultaria en que se elegirian los objetos 1, 4, 7, 10, etc..
-n+B Selecciona 'B' elementos empezando por el ultimo. El valor 'B' no puede ser negativo.

Código de ejemplo



Compatibilidad

Esta propiedad es soportada por todos los navegadores compatibles con CSS3.

Soportado a partir de la versión 1
Soportado a partir de la versión 3.5
Soportado a partir de la versión 9.5
Soportado a partir de la versión 3.2
Soportado a partir de la versión 9

Documento modificado por última vez : 30/12/2020
Ejemplo modificado por última vez : 30/12/2020

Enlaces relacionados