Como usar los selectores de CSS3 pseudo-classes :nth-child y :nth-of-type

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.