Streaming live at 10am (PST)

Using nth children to style collection list items like a loop

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:

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

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

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:

3 Likes

Ah, I see. Whoops.

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

Website is looking good!

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:

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.

2 Likes

Awesome thanks! Virtual beers on me! :smiley:

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>
1 Like

Being new to this I ended up spending hours attempting to use :nth-child(even) within a collection list.
Since I’m new to this the one thing that may make sense to developers flew over my head.
You need to give you collection elements a class.
I left them as ‘Collection List’ > ‘Collection Item’ > my styled elements.
so my code that wasn’t working was:

.collection-item:nth-child(Even) .div-serv-block{ flex-direction: row-reverse;}

Once I gave collection list and collection item a class, my code worked as expected:

.col-serv-item:nth-child(Even) .div-serv-block{ flex-direction: row-reverse;}

This took my styled collection items with heading and par on right > image on left
and alternated.

text image
image text
text image
image text

Hi guys - this is the most useful thread I’ve found on this issue. I have a list of internship programmes in a collection list. I would like to alternate every other collection item to make two changes:

  • change background color to white

  • place the image before the text content.

I don’t really want affect the CTA - containing a button

See screenshot alternating row|586x500

Here’s a preview link to the page

https://preview.webflow.com/preview/bgdemo?utm_medium=preview_link&utm_source=designer&utm_content=bgdemo&preview=ec074dee506502cb6cd0faede71038a9&pageId=5eb95ea9354aa2057e2929e7&mode=preview

This is a summary of the classes in play and what I’d like to achieve:

Please can someone versed in flex and CSS help me rejig the code snippets above to achieve it? I’m a newb to css etc.

Thanks!

If I may… Maybe you’re a bit overusing flex here… and have incredibly complex class names :slight_smile:
Anyway, you could probably use this to make it work :

<style>
 .w-dyn-item:nth-child(odd) .bg_proglist_item_section {
    background-color: #FFF
}
.w-dyn-item:nth-child(odd) .bg_proglist_item_content_inner {
    flex-direction: row-reverse;
}
.w-dyn-item:nth-child(odd) .bg_proglist_item_detail {
    padding-left: 55px; 
    padding-right: 0px;
}
</style>

@pepperclip

thanks for a rapid response and I appreciate your feedback on use of flex … I am not well versed in CSS and will likely carve out some time to simplify class names!

Thanks again, will edit this when I’ve tried it :smile:

Hi again. I inserted the code but it didn’t affect anything. Looking at it, do I need to change this class name to something on my page? Thanks!

.w-dyn-item:

Maybe you got something wrong when copy-pasting, because I just tried it in your read-only and it works fine :slight_smile:

(if you want to try, and see the result in the editor and designer, add an embed element in the page and copy-paste the code I wrote there)

Hi again. I followed your advice and pasted it in an HTML embed which I placed onto the page.

I’m not sure why it doesn’t work in the custom code section for the page. I wrapped it in and placed in the the section in the page settings - it had no effect?

Have you had that before?

Thanks!

Did it work with the embed ?

In the designer and editor you can’t see custom coded css if they are in page settings or site settings. You can only see those on the published site. But if it’s an embed element inside the page, you can see the result in the designer and the editor as well as on the published site.

Hi. Yes the embed did work. Thank you

You can now style first, last, odds and evens natively in Webflow here:

1 Like