En el mundo del «front» muchas veces nos ocurre que cuando creamos un módulo con más de un item (por ejemplo, el típico listado de 6 servicios) no nos planteamos cómo debería de visualizarse esa información en el caso de que no sean 6 items (por seguir con el ejemplo anterior) si no más o menos.
Históricamente, estas casuísticas se solucionaban con un sencillo script condicional, ya fuera en PHP o en Javascript (o el lenguaje que se esté usando por defecto en el proyecto). Pero gracias a las nuevas funcionalidades que proporciona el lenguaje de estilos CSS3, podremos solucionarlo fácilmente y ahorrarnos así unas líneas de código.
Tomando como ejemplo el módulo de servicios con iconos que tenemos en la página principal de nuestra web, vamos a intentar explicar el funcionamiento del condicional con unos pantallazos.
En el pantallazo de arriba se puede observar el caso más favorable, que son 6 items perfectamente alineados.
Pero podría pasar que queramos añadir más servicios o eliminar alguno en el futuro, por eso es bueno tenerlo planteado en la hoja de estilos, para que cuando esto ocurra, no haya que modificar ni html, ni css, ni javascript, ni php ni nada parecido.
Imagina que en vez de 6 servicios tuviéramos 5.
En este caso es posible que por diseño quisiéramos que los dos items de la segunda fila se encontraran centrados respecto al contenedor. Para eso, usaríamos este código css:
/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
las instrucciones que sean necesarias
}
Esta clase anidada actúa en el caso de en una lista solo se encuentre dos items, con lo que, si esto llega a ocurrir, podríamos darles unos estilos adaptados a esta necesidad.
Imaginemos ahora un caso un poco extremo pero que creemos que ayuda mucho a entender el potencial de esta nueva funcionalidad. Vamos a imaginar que en vez de tener los 6 items divididos en dos filas, tenemos solo un item.
Lo lógico sería querer tenerlo centrado respecto al contenedor. En este caso usaríamos este código:
/* one item */
li:first-child:nth-last-child(1) {
las instrucciones que sean necesarias
}
A partir de aquí las posibilidades son prácticamente infinitas. Dejamos a continuación algún ejemplo más de su uso:
/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width: 33.3333%;
}
/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
width: 25%;
}
Esperamos que este pequeño «tutorial» os haya servido de ayuda. Si tenéis cualquier duda podéis dejarnos vuestros comentarios en la noticia o contactar con nosotros aquí.
Un saludo.
