Transforma las aburridas listas de colecciones de Webflow en diseños visualmente atractivos con los selectores CSS:nth-child (). Aprenda a crear patrones repetitivos con un diseño personalizado con nuestro sencillo fragmento de código y nuestra plantilla clonable gratuita.
¿Conoces esa sensación cuando tu lista de colecciones de Webflow se ve... bien, pero también como si pudiera haber sido creada por un bot? Eso podría ser un poco brutal. Pero la lista de colecciones de Webflow se parece a las listas de colecciones, un elemento es igual a otro. Puedes cambiar cosas, puedes usar el formato condicional y desactivar algo, o mostrarlo. Pero, por lo general, se trata de un enlace de una cuadrícula o una lista y el diseño se repite. Sí, nosotros también. Tarjetas uniformes, anchuras idénticas, como una hoja de cálculo de Excel que intenta ser un sitio web.
Pero, ¿y si pudieras salir de la monotonía sin necesidad de 15 clases combinadas o duplicar las listas de colección? Entra el héroe de esta historia, el :n-hijo ().
Y hoy, no solo lo estamos usando, estamos bucle eso, y no como ese músico callejero en el paseo marítimo... Lo cual, por supuesto, es una gran mentira, vamos a dar vueltas como un músico callejero en el paseo marítimo, y os vamos a dar una práctica clonable al final para que todo sea más fácil.
¿Qué es un enésimo hijo?
Bueno, un octavo hijo de un octavo hijo sería un cuadrado mágico, pero aparte de eso, Project usa un potente selector de CSS llamado:nth-child () para romper el diseño predeterminado y sencillo de una lista de colecciones de Webflow. Normalmente, todos los elementos del CMS tienen el mismo estilo, algo aburrido. pero:nth-child () te permite segmentar los elementos en función de su posición en la lista. Por ejemplo, :nth-child (3) selecciona el tercer elemento, :nth-child (2n) toma todos los elementos pares y:nth-child (6n+1) selecciona cada elemento 6+ 1 (1er, 7º, 13º, etc.). Lo usamos para crear un patrón circular de anchuras de diseño: ancho completo, mitad mitad, tercios de dos tercios y, a continuación, repetir. Funciona con cualquier cantidad de elementos del CMS y mantiene tu cuadrícula con el aspecto de que pasaste horas seleccionándola... aunque todo está automatizado con código.
Los patrones más comunes: NTH-Child () y lo que hacen
:enésimo hijo (3)
👉 Objetivos solo el tercero niño.
Caso de uso: Aplica estilo a una sola carta destacada o anula manualmente un elemento del diseño.
:n-hijo (impar)
👉 Objetivos todos los números impares niño: 1º, 3º, 5º, etc.
Caso de uso: Fondos con rayas de cebra, relleno o márgenes alternos.
:enésimo hijo (par)
👉 Objetivos todos los números pares niño: segundo, cuarto, sexto, etc.
Caso de uso: Combínelo con estilos impares para alternar elementos adyacentes.
:n-hijo (3n)
👉 Objetivos cada 3 artículo: 3º, 6º, 9º, etc.
Caso de uso: Añade espacio después de cada tercera tarjeta consecutiva o resalta cada tercera publicación en una cuadrícula.
:enésimo hijo (3n+1)
👉 Objetivos cada tercer elemento a partir del primero: 1º, 4º, 7º, etc.
Caso de uso: Empieza un patrón de diseño repetido de 3 elementos desde el principio.
:enésimo hijo (3n+2)
👉 Objetivos cada tercer elemento a partir del segundo: 2º, 5º, 8º, etc.
Caso de uso: Funciona junto con 3n+1 y 3n+3 para crear bucles de diseño de 3 cartas.
:n-hijo (-n+3)
👉 Se dirige a primeros 3 artículos solo: 1.ª, 2.ª y 3.ª.
Caso de uso: Dale a los primeros elementos de una cuadrícula de CMS un estilo VIP (como publicaciones destacadas).
:n-hijo (n+6)
👉 Se dirige a Sexto artículo y todos los siguientes es: 6º, 7º, 8º...
Caso de uso: Aplica un estilo alternativo o un diseño predeterminado una vez que tu sección de héroes termine de mostrarse.
:enésimo hijo (6n+1)
👉 Objetivos cada 6 + 1 artículo: 1º, 7º, 13º, 19º, etc.
Caso de uso: Crea un patrón de diseño repetitivo de 6 elementos, perfecto para una cuadrícula editorial modular.
:último hijo
👉 Se dirige a último hijo, sin importar cuántos artículos haya.
Caso de uso: Estiliza al solitario rezagado al final para que no quede torpe (hemos dado el nuestro ancho completo).
Conoce: Flex Loop Pattern 6
Este pequeño y picante diseño CSS utiliza la potencia de Flexbox + :n-hijo () para crear un patrón de diseño repetido de 6 elementos que parezca personalizado, editorial y lleno de ritmo. Está diseñado para que puedas copiar y pegar en tu cuadrícula de Webflow CMS.
Qué hace:
- Elemento 1: ancho completo
- Elemento 2:50%
- Elemento 3:50%
- Elemento 4:33,33%
- Artículo 5:66,66%
- Elemento 6: se restablece al Elemento 1 y comienza de nuevo
Este es el código completo, con comentarios:
<style>
/* ===============================
Flex Loop Pattern 6
===============================
A 6-item repeating layout pattern:
1. Full-width
2. Half-width
3. Half-width
4. One-third width
5. Two-thirds width
6. (Repeats from 1)
*/
/* 1. Every 6th + 1 item (1st, 7th, 13th, etc.) spans full width */
.grid .child:nth-child(6n + 1) {
flex-basis: 100%;
}
/* 2 & 3. Next two items take up 50% each (side by side) */
.grid .child:nth-child(6n + 2),
.grid .child:nth-child(6n + 3) {
flex-basis: 50%;
}
/* 4. Fourth item in the pattern takes one-third width */
.grid .child:nth-child(6n + 4) {
flex-basis: 33.33%;
}
/* 5. Fifth item takes two-thirds width, pairing with the one-third */
.grid .child:nth-child(6n + 5) {
flex-basis: 66.66%;
}
/* ===============================
Default Flex Behaviour Reset
===============================
Prevent children from shrinking or growing unexpectedly.
All sizing comes from flex-basis.
*/
.grid .child {
flex-shrink: 0;
flex-grow: 0;
}
/* ===============================
Straggler Safety Net
===============================
If there's a lonely item at the end (e.g. 25th in a set of 25),
make it full width so it doesn't sit awkwardly beside empty space.
*/
.grid .child:last-child {
flex-basis: 100%;
}
</style>Por qué funciona este patrón
Los diseños basados en CMS pueden resultar complicados porque todos los elementos comparten la misma clase. Eso significa que no puedes simplemente ir al Diseñador de Webflow y empezar a diseñar el tercer o el noveno elemento de forma diferente. Pero :n-hijo () le permite controlar el enfoque láser sobre el estilo basado en la posición.
Cuando se combina con flex-wrap, flex-basis y un poco de matemáticas, puedes crear una cuadrícula que mira seleccionado incluso cuando está 100% basado en CMS.
Y dado que el patrón se repite cada 6 elementos, esto funciona perfectamente para listas largas. Ya sea que tengas 6, 60 o 600 objetos de colección, seguirán diseñándose como profesionales. Y si echas un vistazo, tenemos las imágenes configuradas para cubrir y el envoltorio que los niños estiran.
Bonificación: Otros usos de :n-hijo ()
La magia no se detiene en las rejillas. :n-hijo () es básicamente un mando universal para peinar por encargo.
Estos son algunos otros pandilleros:
Resalta cada tercer elemento:
.grid .child:nth-child(3n) {
background-color: #f9f9f9;
}Útil para crear bandas de cebra, fondos escalonados o simplemente romper el ritmo.
Estiliza el primero n artículos de manera diferente:
.grid .child:nth-child(-n+3) {
border: 2px solid red;
}Esto otorga a los tres primeros artículos un tratamiento VIP. Piensa en publicaciones destacadas o en cartas de héroes.
Diríjase a un número específico:
.grid .child:nth-child(9) {
transform: rotate(2deg);
}¿Por qué? Porque tal vez tu novena entrada de blog sea caótica y neutral.
Los patrones como este te permiten simular el aspecto artesanal, incluso cuando el contenido está completamente automatizado a través del CMS. Mantiene tu diseño con un aspecto fresco sin que el diseñador se convierta en una pesadilla para dar nombres a las clases.
¿Y la mejor parte? Puedes pegarlo en el de tu proyecto <head> o <body> personaliza una sección de código y aléjate como un dios del diseño, o usa un código incrustado y observa el estilo dentro del diseñador.
Pruébalo. Rompe la red. Sorprende a tu cliente.
O simplemente asiente con la cabeza en silencio porque sabes que tu artículo de la 27ª colección es supuesto que sea de ancho completo. 😎
