vagacode

Habíamos visto cómo podíamos identificar el primer elemento o el último pero ¿qué podemos hacer para identificar un elemento cualquiera o grupo de elementos dentro de otro sin tener que agregar datos adicionales? Para eso es que existe la pseudo-clase :nth-child.

Por ejemplo, si pusiéramos una serie de párrafos dentro de un div:

<div id="ejemplo">
	<p>primera línea de texto</p>
	<p>segunda línea de texto</p>
	<p>tercera línea de texto</p>
	<p>cuarta línea de texto</p>
</div>

Y definimos estos estilos identificando cada párrafo con un número índice:

#ejemplo p:nth-child(1) {color: red;}
#ejemplo p:nth-child(2) {color: green;}
#ejemplo p:nth-child(3) {color: brown;}
#ejemplo p:nth-child(4) {color: blue;}

Cada párrafo se verá de un color diferente.

Esto parece demasiado simple pero podemos identificar los elementos con algún tipo de argumento más sofisticado, por ejemplo, establecer las propiedades de los párrafos impares y de los párrafos pares:

#ejemplo p:nth-child(2n+1) {color:red;}
#ejemplo p:nth-child(2n) {color:green;}
// que también puede hacerse utilizando las palabras even y odd
#ejemplo p:nth-child(even) {color:red;}
#ejemplo p:lnth-child(odd) {color:green;}

La aritmética puede ser todo lo compleja que se nos ocurra:

:nth-child(3) identifica el tercer elemento
:nth-child(n+6) identifica todos los items excepto los primeros cinco
:nth-child(-n+3) identifica sólo los primeros tres items
:nth-child(3n+1) identifica a los elementos de tres en tres (1 4 7 etc)

La pseudo-clase :nth-last-child hace lo mismo pero cuenta los elementos a partir del último; por ejemplo:

:nth-last-child(2) identifica el ante-último
:nth-last-child(-n+3) identifica los últimos tres

Las pseudo-clases :nth-of-type y :nth-last-of-type tienen la misma sintaxis pero seleccionan los elementos de cierto tipo.