Streaming live at 10am (PST)

Collection list - color every other item

Hey,

Have anyone figured out, how to change the background dynamically of every other item in a collection list? I can’t crack this.

Thank you!

Items in a Collection List are exactly identical.

Now CSS allows you to style “every other” items. The property isn’t yet supported by Webflow but it’s easy to use custom code for this, and if you follow the instructionsbelow you’ll also be able to see the results live, right in the designer.

  1. Style your background on an item, as you wish it would look on even or odd lines. Yes it’s going to show up on all lines but that’s ok for the moment.

  1. Keep the item selected, open the CSS preview box to grab the CSS bg code

  1. Remove the styling of the bg from the item (Alt+Click on the blue label)

image

  1. Add a custom code component anywhere in the page, and paste the code inside of it. Wrap the code in Style tags, add a dot before the class name, and remove everything that isn’t part of the style you want to see applied on every other row (here I kept only the bg code). You should end up with something looking like this:

It’s important that the class name reflects the class of the item, of course. If you click Save, you’ll see all the rows colored, that is normal.

  1. Now add a pseudo-class to your class in the custom code. Let’s use :nth-child(odd) to start the styling at the first row and color all the odd rows.

Cool, it works. You can use :nth-child(even) instead, or on another CSS rule to style the other rows too.

You can read further on pseudo-classes and pseudo-elements on the web. They bring a lot of power intargetting exactly the elements you need. For example I could have used .my-collection-item:nth-child(1) to style the 1st element of the list differently, or any specific item. And with the Code Preview technique, you can visually style your things inside of Webflow and reuse the code in custom code Embed boxes.

Hope this gives you new perspective on what’s possible with Webflow.

Here is the final code I used in my example:

<style>
.my-collection-item:nth-child(odd) { 
			background-color: hsla(204.07185628742513, 69.87%, 53.14%, 0.18); }
</style>
2 Likes

Wow Vincent… This is the most comprehensive answer I have ever seen on a forum! Explanation, screenshots and code example, its simply perfect!

I got it to work the first time, thank you so much for taking your time to make such an answer! :pray:

1 Like

@vincent How would this work with divs inside a collection list? For example I have a collection of 2 products.

Each product has another child div that I want to change the background color of depending on the product being shown.

I cannot use web flows native CMS functionality because I am porting this to shopify using the Udesly adapter.

I got this code to work, but it changes both items in the collection. Not just the first one.

you need to control this particularity with CMS. For example a color field or a switch, then use conditional visibility on a colored element.