Siempre me resulta muy difícil acordarme de como debo de usar los selectores :nth-child de CSS.
Pero esta vez he querido documentarme para no olvidarme ya nunca más de esto y de paso he decidido a crear este artículo explicando como podemos usar estos selectores de CSS3 para ayudarnos a seleccionar y aplicar estilos de una manera muy precisa a cualquier selector del documento HTML.
:nth-child(n)
En este ejemplo :nth-child(3)
obtiene el tercer elemento del elemento padre ol
dentro del DOM
<ol> <li>Text html test</li> <li>Text html test</li> <li>Text html test</li> <li>Text html test</li> <li>Text html test</li> <li>Text html test</li> </ol>
ol li:nth-child(3) { color: #990000; }
No obstante, el argumento :nth-child(3)
puede ser sustituido por las palabras clave odd y even y así seleccionar los hijos impares con :nth-child(odd)
y los hijos pares con :nth-child(even)
aplicando estas pseudo-clases a la etiqueta HTML de lista ol
.
ol li:nth-child(odd) { color: #990000; } ol li:nth-child(even) { background-color: #DDD; color: #333; }
Y quedaría de la siguiente manera.
Formulas numéricas
Ahora es cuando se complica la cosa, y si queremos acceder cada 2 elementos? Para esto tenemos la formula xn+y-->(3xn)+3
. Hay que pensar como si fuese una iteración en programación,
x = cada cuantos elementos queremos contar;
y = por donde empezar a contar;
n = actúa como índice por cada elemento seleccionado, empieza por 0.
ol.nth li:nth-child(3n+3) { background-color: #cccccc; }
:nth-of-type(n)
En este caso lo que estamos seleccionando es el elemento que precede a :nth-of-type()
y ‘n’ tiene las mismas funciones que en el caso de :nth-child()
, valores numéricos, odd, even y formulas numéricas.
Veamos este ejemplo:
<section> <p>Coche</p> <p>Camión</p> <!-- Acceder a este elemento --> </section>
p:nth-child(2) { color: red; } p:nth-of-type(2) { color: red; }
Los dos ejemplos de CSS hacen lo mismo pero no tienen el mismo significado, con :nth-child –> significa que seleccionamos el elemento SI?:
1- hay un elemento párrafo.
2- si es el segundo hijo del elemento padre.
Con :nth-of-type –> significa:
1- selecciona el segundo páragrafo hijo del padre
Pero que ocurre si añadimos más etiquetas a nuestro HTML:
<section> <h2>Articulos</h2> <p>Casa</p> <p>Perro</p> <!-- Acceder a este elemento --> </section>
Ahora p:nth-child(2)
está seleccionando al primer ‘p’ porque es el segundo elemento hijo del padre que es la etiqueta ‘section’.
p:nth-of-type(2)
sigue funcionando ya que estamos accediendo al segundo elemento ‘p’.
Espero que les haya sido útil la información.