El enésimo hijo CSS

Seleccionar al enésimo hijo con  :nth-child()

En el CSS3 podemos seleccionar al enésimo hijo de una caja padre utilizando el selector :nth-child ( de hecho una pseudo-clase ). Por ejemplo: dada una lista <ul> de 5 artículos,  li:nth-child(3) selecciona el tercer artículo de la lista.

#ul1 li:nth-child( 3 ){ background-color:LightSkyBlue;}

<ul id="ul1">
   <li>artículo 1</li>
   <li>artículo 2</li> 
   <li>artículo 3</li>
   <li>artículo 4</li>
   <li>artículo 5</li>
</ul>

• artículo 1
• artículo 2
• artículo 3
• artículo 4
• artículo 5

Pero el selector :nth-child puede hacer mucho más que esto.

Utilizando palabras clave

Podemos seleccionar los hijos impares ( odd ) o pares ( even ) utilizando las palabras clave odd o even. Por ejemplo: dada la misma lista <ul> de 5 artículos ,  li:nth-child( even ) selecciona los artículos 2 y 4, ( los amarillos ) mientras que li:nth-child( odd ) selecciona los artículos 1, 3 y 5 ( los azules ).

#ul2 li:nth-child( even ){ background-color:Gold;}
#ul2 li:nth-child( odd ){ background-color:LightSkyBlue;}

<ul id="ul2">
   <li>artículo 1</li>
   <li>artículo 2</li> 
   <li>artículo 3</li>
   <li>artículo 4</li>
   <li>artículo 5</li>
</ul>

• artículo 1
• artículo 2
• artículo 3
• artículo 4
• artículo 5

Utilizando fórmulas :nth-child( an+b )

También podemos utilizar fórmulas, lo que es fantástico e inusual si pensamos que esto es CSS. Por ejemplo li:nth-child(2n) selecciona todos los hijos pares, mientras que li:nth-child(3n) selecciona cada hijo cuyo índice es un múltiplo de 3.

#ul3 li:nth-child( 2n ){ background-color:LightSkyBlue;}
#ul3 li:nth-child( 3n ){ background-color:Gold;}

<ul id="ul3">
   <li>artículo 1</li>
   <li>artículo 2</li> 
   <li>artículo 3</li>
   <li>artículo 4</li>
   <li>artículo 5</li>
</ul>

• artículo 1
• artículo 2
• artículo 3
• artículo 4
• artículo 5

Pero podemos hacer cosas todavía más complicadas y más interesantes: li:nth-child(2n+1) selecciona los elementos 1, 3, 5 y 7 de la siguiente lista.

#ul4 li:nth-child( 2n+1 ){ background-color:LightSkyBlue;}

<ul id="ul4">
   <li>artículo 1</li>
   <li>artículo 2</li> 
   <li>artículo 3</li>
   <li>artículo 4</li>
   <li>artículo 5</li>
   <li>artículo 6</li>
   <li>artículo 7</li>
</ul>

• artículo 1
• artículo 2
• artículo 3
• artículo 4
• artículo 5
• artículo 6
• artículo 7

¿Como lo hace? y ¿qué significa n? El parámetro n es un contador que empieza a 0. Para entender porque li:nth-child(2n+1) selecciona los elementos 1, 3, 5 y 7 miremos la siguiente tabla:

El parámetro n	2n+1	=
0	2*0+1	1
1	2*1+1	3
2	2*2+1	5
3	2*3+1	7

La formula que hemos utilizado se puede escribir así: nth-child(an+b). En el ejemplo anterior a = 2, y b=1. Los parámetros a y b son números enteros y pueden tomar tanto valores positivos como negativos.
www.sitepoint.com  pública, en un artículo interesante acerca del selector nth-child, esta tabla muy útil con los valores resultantes para nth-child(an+b):

n	2n+1	4n+1	4n+4	4n	5n-2	-n+3
0	1	1	4	-	-	3
1	3	5	8	4	3	2
2	5	9	12	8	8	1
3	7	13	16	12	13	-
4	9	17	20	16	18	-
5	11	21	24	20	23	-

Utilizando varios selectores nth-child concatenados

En el siguiente ejemplo utilizamos dos selectores nth-child concatenados. El primer selector

li:nth-child(-n+16)

selecciona las primeras 16 autonomías de la lista. Si concatenamos otro selector, por ejemplo:

li:nth-child(-n+16):nth-child( 2n+4 )

de las primeras 16 autonomías ( el primer selector ) seleccionamos solo los elementos pares ( 2n+4 ) , empezando con el cuarto ( 2n+4 ).

#autonomias li:nth-child(-n+16){ background-color:Gold;}
#autonomias li:nth-child(-n+16):nth-child(2n+4){ background-color:LightSkyBlue;}

<ul id="autonomias">
<li>Andalucía</li>
<li>Cataluña</li>
<li>Comunidad de Madrid</li>
<li>Comunidad Valenciana</li>
<li>Galicia</li>
<li>Castilla y León</li>
<li>País Vasco</li>
<li>Canarias</li>
<li>Castilla-La Mancha</li>
<li> Región de Murcia</li>
<li>Aragón</li>
<li>Islas Baleares</li>
<li>Extremadura</li>
<li>Principado de Asturias</li>
<li>Navarra</li>
<li>Cantabria</li>
<li>La Rioja</li>
<li>Ceuta</li>
<li>Melilla</li>
</ul>

• Andalucía
• Cataluña
• Comunidad de Madrid
• Comunidad Valenciana
• Galicia
• Castilla y León
• País Vasco
• Canarias
• Castilla-La Mancha
• Región de Murcia
• Aragón
• Islas Baleares
• Extremadura
• Principado de Asturias
• Navarra
• Cantabria
• La Rioja
• Ceuta
• Melilla

Alternancia de etiquetas

Utilizar una lista puede ser bastante ilustrativo, pero veamos que pasa si utilizamos una alternancia de títulos ( headers ) y párrafos.

<div id="enesimoHijo">
  <h6>Hijo 1 ( encabezado h6 )</h6>
  <p>hijo 2 ( párafo 1 )</p>
  <p>hijo 3 ( párafo 2 )</p>
  <p>hijo 4 ( párafo 3 )</p>
  <h6>Hijo 5 ( encabezado h6 )</h6>
  <p>hijo 6 ( párafo 4 )</p>
  <p>hijo 7 ( párafo 5 )</p>
</div>

div#enesimoHijo{width:200px; margin:0 auto; padding:3px; border:1px solid #d9d9d9;}
div#enesimoHijo p, div#enesimoHijo h6{ padding:2px 10px; margin:2px 0;}
#enesimoHijo p:nth-child(2n+1){border: 1px solid red;background-color:Chartreuse;}

Hijo 1 ( encabezado h6 )

hijo 2 ( párafo 1 )

hijo 3 ( párafo 2 )

hijo 4 ( párafo 3 )

Hijo 5 ( encabezado h6 )

hijo 6 ( párafo 4 )

hijo 7 ( párafo 5 )

Mirando la tabla de arriba llegamos a la conclusión que p:nth-child(2n+1) tiene que seleccionar los hijos 1, 3, 5 y 7. ¿Qué pasó? Los encabezados son también hijos del <div id="enesimoHijo">, pero nosotros seleccionamos solo los parafos que cumplen la condición.
Si queremos seleccionar los párrafos  1, 3, 5. . .  tenemos que utilizar otro selector :nth-of-type ( el enésimo de su tipo ).

div#enesimoDeSuTipo{width:200px; margin:0 auto; padding:3px; border:1px solid #d9d9d9;}
div#enesimoDeSuTipo p, div#enesimoHijo h6{ padding:2px 10px; margin:2px 0;}
#enesimoDeSuTipo p:nth-of-type(2n+1){border: 1px solid red;background-color:Chartreuse;}

<div id="enesimoDeSuTipo">
  <h6>Hijo 1 ( encabezado h6 )</h6>
  <p>hijo 2 ( párafo 1 )</p>
  <p>hijo 3 ( párafo 2 )</p>
  <p>hijo 4 ( párafo 3 )</p>
  <h6>Hijo 5 ( encabezado h6 )</h6>
  <p>hijo 6 ( párafo 4 )</p>
  <p>hijo 7 ( párafo 5 )</p>
</div>

Hijo 1 ( encabezado h6 )

hijo 2 ( párafo 1 )

hijo 3 ( párafo 2 )

hijo 4 ( párafo 3 )

Hijo 5 ( encabezado h6 )

hijo 6 ( párafo 4 )

hijo 7 ( párafo 5 )

Otras pseudo-clases

En el CSS3 hay otras pseudo-clases que permiten seleccionar de la misma manera múltiples elementos según su posición en el DOM ( Document Object Model ). Estas pseudo-clases son:

Selector	Ejemplo	Descripción
:nth-child(n)	p:nth-child(2)	Selecciona cada <p> que sea el segundo hijo de su padre.
:nth-last-child(n)	p:nth-last-child(2)	Selecciona todos los <p> que sean el penúltimo hijo de su padre. ( El segundo a partir del último )
:nth-of-type(n)	p:nth-of-type(2)	Selecciona cada <p> que sea el segundo <p> hijo de su padre.
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selecciona todos los <p> que sean el penúltimo <p> hijo de su padre. ( El segundo a partir del último )