Selector CSS : nth-child
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 |
Ejemplo modificado por última vez : 30/12/2020