Visualizando ::nth-child | Oloblogger Hace ya tiempo que tenemos entre nosotros el nivel 3 de CSS, tanto que ya casi parece antiguo. Entre sus diversas incorporaciones hay una ...

11 de diciembre de 2014

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...

Seleccionando, que es gerundio
¿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
Copy URL

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

follow us in feedly

8 comentarios :

  1. Excelentes ejemplos, no sabía que se podría llegar a tal nivel de especificidad. Gracias Oloman

    ResponderEliminar
  2. Cuantas horas me hubiese ahorrada el conocer esto antes... sólo conocía el first y el last... gracias por los ejemplos!

    ResponderEliminar
  3. Hola Oloman, te puedes imaginar que esto me suena a chino (qué maja que soy ☻), pero he pasado por aquí para, y a pesar de que sé que "no te hacen mucha gracia", a felicitarte las fiestas.

    Mis mejores deseos para este año que comienza, vale?
    Y que disfrutes mucho de las fiestas (sí, lo sé, una originalidad de narices)

    Un abrazo
    ........|___|.....
    ........|000|.....
    ........|000|.....
    .........\00/.....
    ..........\0/.....
    ...........||.....
    ...........||.....
    ........._||_.....
    FELIZ 2015!!!

    (sí, lo sé, te acabo de rematar con el dibujito ☺)

    ResponderEliminar
    Respuestas
    1. Jajaja... Bueno, al menos me he reído un rato con tu comentario. Gracias Andaira. Felices fiestas para tí también

      Eliminar
  4. Hola !!!
    Tengo algunas dificultades, Estoy maquetando con xhtml 1.0 strict, una galeria de fotos lo mas dinamica posible, pero se me esta dificultando a la hora de validarlo.me podrias mostrar algunos ejemplos de galerias, Muchas gracias.Vall

    ResponderEliminar
    Respuestas
    1. Hola Vall. Galerías no encontrarás muchas por este blog y además con lo que me indicas no me hago una idea exacta de lo que quieres, así que lo mejor será que hagas una búsqueda directamente en Google.

      Eliminar
  5. Saludos Oloman
    quiero alterar el fondo de los post en una pagina de etiquetas search/label/ con even ó odd pero me complico con el date-posts date-outer ayuda porfa el mate ya no me da XD

    ResponderEliminar
    Respuestas
    1. No sé exactamente cuál es tu problema, ni cómo se manifiesta, ni cómo lo intentas resolver, pero intuyo que esto quizás te pueda ayudar: http://www.oloblogger.com/2012/10/agrupar-desagrupar-posts-blogger.html

      Eliminar