NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Selector CSS : nth-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-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 segunda etiqueta 'p' que pertenecen a objetos con una clase especifica, puedes utilizar .ClaseEspecifica > p:nth-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 primero.

Sintaxis

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

/* Posición única. */
/* pares / impares. */
/* Multiples de 'A' + 'B'. */
/* Desde el primer 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 primero. El valor 'B' no puede ser negativo.
    




Código de ejemplo

Compatibilidad
Esta propiedad es soportada por todos los navegadores compatibles con CSS.
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.1
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