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

Inicio / Blog / Desarrollo / Como usar los selectores de CSS3 pseudo-classes :nth-child y :nth-of-type
Como usar los selectores de CSS3 pseudo-classes :nth-child y :nth-of-type

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.

Si continuas utilizando este sitio aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar