w3.unpo<code>todo

El enésimo hijo

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;}

   
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;}

   
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;}

   
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;}

   
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:

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):

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;}

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.

  
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 )

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;}

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;}

  
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: