Visualizando ::nth-child

Hace ya tiempo que tenemos entre nosotros el nivel 3 de CSS, tanto que ya casi parece antiguo.

Entre sus diversas incorporaciones hay una sección que está entre mis favoritas, simplemente por aquello de que es divertido trastear con sus selectores. No es otra que la que trata de sus nuevos pseudoelementos y pseudoclases.

De las segundas hay como una docena nuevas, pero hoy veremos -literalmente- la denominada ::nth-child, que nos sirve para seleccionar uno o varios elementos concretos, de entre todos los que son hijos de un padre común y, por tanto, hermanos entre sí.


¿Y esto para qué sirve? Pues se llaman selectores por algo, pero los de este tipo en concreto nos permiten seleccionar elementos de una forma más precisa. Luego con la declaración ya haremos después con ellos lo que es el objeto principal de CSS: dar un determinado estilo a algo.

Por ejemplo podría servir para seleccionar el cuarto párrafo de un texto y ponerle sólo a ese un borde; para cambiar el icono de los elementos pares de un menú; para poner un fondo distinto al primer y último div de un conjunto de cajas; para hacer más ancho el primer sumario de nuestra página de portada...

¿Cómo harías para seleccionar sólo el 8º y el 9º cuadro de esta serie de cuadrados para cambiarles el color de fondo?

Ya vimos algunos selectores "especiales" anteriormente, como los de atributos y los que algunos denominan avanzados, pero este no lo explicaré, sino que directamente pondré una demo que incorpore la mayoría de variantes posible.

Para ello he elegido una lista normal que tiene la siguiente estructura, ya que creo que así está muy claro cuál es el elemento padre (ul) y cuáles son los hijos (li), pero siempre que hablemos de elementos hermanos, :nth-child funcionará exactamente igual.

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  (etc.)
</ul>

Para cada ejemplo, en primer lugar indico qué seleccionaremos, después qué valores habría que poner a ::nth-child para ello y por último la lista de antes pero con los elementos que resultarían seleccionados tras aplicar esos valores, marcados con fondo rojo.

Que no os despisten los dos primeros que son como variantes para el caso particular de que queramos seleccionar sólo el primer o último hermano.

PRIMER ELEMENTO

ul li:first-child

ULTIMO ELEMENTO

ul li:last-child

UN ELEMENTO CONCRETO (QUINTO)

ul li:nth-child(5)

TODOS LOS IMPARES

ul li:nth-child(odd)

TODOS LOS PARES

ul li:nth-child(even)

TODOS LOS MÚLTIPLOS DE 3

ul li:nth-child(3n)

TODOS LOS MÚLTIPLOS DE 3 MÁS 2
(El cero es el primer múltiplo)

ul li:nth-child(3n+2)

DEL CUARTO HASTA EL ÚLTIMO

ul li:nth-child(n+4)

DEL CUARTO HASTA EL PRIMERO

ul li:nth-child(-n+4)

DEL CUARTO AL NOVENO
(del cuarto hacia último + del noveno hacia primero)

ul li:nth-child(n+4):nth-child(-n+9)

SÓLO LOS PARES ENTRE CUARTO Y NOVENO

li:nth-child(n+4):nth-child(even):nth-child(-n+9)

SÓLO LOS MÚLTIPLOS DE 3 ENTRE CUARTO Y NOVENO

li:nth-child(n+4):nth-child(3n):nth-child(-n+9)

SÓLO LOS PARES MÚLTIPLOS DE 3

li:nth-child(even):nth-child(3n)

SÓLO PARES Y MÚLTIPLOS DE TRES ENTRE CUARTO Y NOVENO

li:nth-child(n+4):nth-child(even):nth-child(3n):nth-child(-n+9)

Todo lo anterior fue fruto de una tarde en la que me fuí liando, liando, liando y finalmente construí este Codepen.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter