Streaming live at 10am (PST)

Using nth children to style collection list items like a loop


#1

Hi,

I’m trying to achieve a very specific grid to showcase some projects on a webflow CMS site. The idea is to create a CMS loop with 1st, 2nd, 3rd, 4th and 5th item that have a different styling and the styling repeats afterwards.

For example: 1st red background / 2nd blue background / 3rd green background / 4th yellow background / 5th black background and it loops for the number of projects (may it be 5 or 28). You would therefore have

#1 red / #2 blue / #3 green / #4 yellow / #5 black / #6 red / #7 blue / #8 green / #9 yellow etc

Since Webflow has a 20 collection list per page limit and since it (might) slows the site down if we use to many “single use” collection list I started doing the following with an embed component :

Create a Collection list > collection item
Give class to collection item and style the first collection item in webflow

Then, style in custom code thanks to css overriding webflow to tweak the item
.collection-list:nth-child(2n) .collection-item {}
.collection-list:nth-child(3n) .collection-item {}
.collection-list:nth-child(4n) .collection-item {}
.collection-list:nth-child(5n) .collection-item {}

It works for the 5 first items… but…
My problem is, it doesn’t exactly seem to work as a loop… and I suppose it’s because 2n and 3n sometimes conflict (for instance when you have 2*3). And I can’t use odd and even with nth-child because the idea is to have it loop only after 5 items…

Does anyone have a genious idea for that ? I’d be forever grateful !
I can’t manage to find any suitable answer on google for this conundrum :grimacing:


#2

You could just create a colour value in the collection settings, for each project.


#3

Hi Joe,
Your idea is perfect if I wanted only the background color to change :slight_smile:

Unfortunately I used the color example just to explain the concept…
The idea is more to be able to build a custom grid with different positioning for multiple elements in the item (for instance picture and meta title would change for 5 different layouts and then repeat in a loop of 5).

Here’s a link to the project I’m working on : http://heju.webflow.io/projets


#4

Ok, so I posted the question on Stack Overflow yesterday too and got answers :slight_smile:
I got the concept of nth-child counter wrong. Here’s the right way to use it apparently :

The formula in the nth-child selector goes as follows:
nth-child(an+b) Where a is the size of your cycle (in my case, 5), and b is the offset value (or modulo).
(long stack overflow answer here : https://stackoverflow.com/questions/51544693/using-css-nth-child-to-create-loop-with-5-different-designs-repeated-every-5-it?noredirect=1#comment90060911_51544693)

It seems to be working pretty well for me.

Therefore you could build complex CMS grids in webflow by using nth-child in custom code.

1/ You style your base item.
2/ According to size of loop you tweak each item using CSS nth-child("sizeofloop"n+“positioninloop”).

To make it easier, you can even style each elements without CMS, publish on webflow.io the page, get from chrome inspector the differences in styling, copy paste into custom code with the right nth-child settings.

I love webflow :slight_smile:


#5

Ah, I see. Whoops.

Hopefully Webflow implements better support for nth child scenarios into the designer.

Website is looking good!


#6

Hi Pepperclip, this looks like exactly the solution I’m looking for. Could you share the codesnippet you use in custom code so I can stumble my way into a solution? :slight_smile:


#7

Sure !
In my case it means 3 things :
1 — I use a loop of 5 elements, I style the first one in designer, and then in custom code I add CSS to style alternately each other 4 elements in loop.
2 — you need your CMS to have both vertical and horizontal image ready, and a div that shows the image or not according to position in loop
3 — Add a media query condition because you want the styling in mobile to stay the one you design in webflow

For me it looks like that :

<style>
@media screen and (min-width: 480px) {
    /* 1st in loop */
    .u-project-item:nth-child(5n+1) .u-project-img {
    		display: inline-block;
    }
    .u-project-item:nth-child(5n+1) .home-vertical-proj{
    		display: none;
    }
    /* 2nd in loop */
    .u-project-item:nth-child(5n+2) .u-project-wrapper {
				width:45%;
        margin-right:auto;
        margin-left:unset;
        text-align:right;
    }
    .u-project-item:nth-child(5n+2) .home-vertical-proj /*.u-project-img*/ {
				position:relative;
        width:100%;
        padding-top:150%;
    }
    .u-project-item:nth-child(5n+2) .u-project-meta {
				position: absolute;
        left: 80%;
        bottom: 25%;
        text-align: left;
        display: inline-block;
        width:100%;
    }
    
    /* ...etc */
    }
</style>

Here’s the “generic code” you need :

@media screen and (min-width: 'YOUR-IDEAL-WIDTH'px) {
.YOUR-ITEM-CLASS:nth-child(YOUR-LOOP-SIZEn+THE-POSITION-IN-LOOP) .CLASS-INSIDE-ITEM-TO-TWEAK {
    		PARAM: VALUE;
    }
}

Meaning for a loop of 5, applicable only for mobile :

<style>
@media screen and (min-width: 480px) {
/* 1st in loop */
    .CLASS-1:nth-child(5n+1) .CLASS-2 {
    		PARAM: VALUE;
    }
}
</style>    

I hope that explains the idea more clearly :smile:
And of course you can always go check http://heju.webflow.io/projets and reverse engineer with your chrome inspector.


#8

Awesome thanks! Virtual beers on me! :smiley:


#9

Got it to work! \o/
I was only looking to alternate the order of the elements in my cards, I ended up using this:

<style>
   @media screen and (min-width: 480px) {
   /* reverse odd numbered children */
        .w-dyn-item:nth-child(odd) .news-block {
		flex-direction: row-reverse;
		}
     }
</style>