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!