Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

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 n2n+1=
02*0+11
12*1+13
22*2+15
32*3+17
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.comstar  pública, en un artículo interesantestar acerca del selector nth-child, esta tabla muy útil con los valores resultantes para nth-child(an+b):
n2n+14n+14n+44n5n-2-n+3
0114--3
1358432
25912881
3713161213-
4917201618-
51121242023-

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

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas