Uso de la pseudo-clase nth-child() en CSS3

Con CSS3 nace una nueva pseudo-clase llamada :nth-child() que nos permite escoger a un hijo de acuerdo a un número. Los usos que más se le han dado a este selector es el de colorear una tabla con colores alternos, en ese caso se usa en vez de número “odd” o “even” para los impares y pares. También podemos hacer uso del número “n” para hacer operaciones sencillas, pero en esta ocasión haremos uso de el intensivamente.

En el siguiente tutorial vamos a implementar la pseudo-clase nth-child() para crear unos botones para suscribirse a nuestras redes sociales, y haremos el uso de este selector para poder configurar los elementos sin usar clases ni id’s.

Obviamente necesitamos de ellos para configurar todo, pero para configurar algunas partes podemos usar el selector, y verán que nos da una gran posibilidad de configurar de una forma muy sistemática.

Demo del tutorial

Teoría

Este selector nos permite obtener el elemento HTML que nosotros definamos con un número, es decir, el número equivale a la jerarquía o posición en cuanto a hijo que corresponde. En otras palabras, si decimos que queremos la capa div 1 queremos decir que es la primera capa div que encuentra, si decimos que es 5 es la quinta capa div, etc, pero mejor veamos el tutorial para ver cómo funciona.

Quizá les interese conocer más sobre los padres e hijos en el DOM en este tutorial

HTML

Nuestro HTML como muchos tutoriales consta de un contenedor que tiene dos capas, una es el ícono de nuestra red social y la otra va a mostrar el número de suscriptores o seguidores tenemos, nada del otro mundo. Tenemos las respectivas clases para poder identificarlo, pero veremos que podemos no hacer uso de ellas con nuestro selector.

CSS

Primero hacemos flotante nuestro ícono para poder ordenar todos en línea y de alguna forma se vea todo equilibrado. Nos va a servir porque así tenemos control total de que seguirá en línea todo nuestro tutorial.

En esta segunda parte empezamos a usar nth-child(). Vemos primero que le decimos que queremos los div para el selector, de esa forma escogerá solo los hijos que estén dentro de la clase .vistaContainer.  ahora, primero configuramos el hijo 1 que es el del ícono, y sabemos que es el íconos porque con la posición relative sobreponemos esta capa con el z-index de 1.

La segunda capa no tiene tampoco nada de especial, sólo el transition para que se vea animada y la posición de absolute para que quede floatando sobre todo el contenido, pero con la opacidad no se vea.

Lo que sigue es hacer uso del :hover para configurar qué es lo que va a pasar con la capa de abajo cuando el mouse se pare sobre el ícono de las redes sociales. Lo descubrimos, y lo subimos para que se pueda ver. Ojo que el texto lo hacemos grande, en el estado normal lo hacemos pequeño para que alcance en el cuadrito, pero ahora lo hacemos más grande para que se vea mucho mejor.

Ahora que ya configuramos el comportamiento general de todos los íconos tenemos que personalizar cada uno para que se adecue a lo que queremos, que en nuestro caso es el ícono mismo, así como su posición. Para eso necesitamos hacer uso de nuevo de nth-child() porque de otra forma tendríamos que poner un id o clase único a cada ícono, y como no queremos hacer eso con el selector logramos el cometido.

Por último configuramos individualmente lo que pasa con la capa oculta. Cambiamos el color de fondo nada más, pero lo importante de este código es el uso de dos selectores juntos, usamos :nth-child() y :hover al mismo tiempo para poder configurar todo y así mostrar que podemos juntar varios selectores y no sólo uno.

Entonces, teniendo todo esto ya deberíamos de tener nuestro tutorial terminado, haciendo un uso del nth-child() de verdad, y no sólo colorear tablitas.