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.
- 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.
- Keep the item selected, open the CSS preview box to grab the CSS bg code
- Remove the styling of the bg from the item (Alt+Click on the blue label)
- 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.
- 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>
9 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! 
2 Likes
@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.
@vincent Hi Vincent,
Thanks for sharing this!
I’ve followed your explanation and applied it to my setup but I’ve not had any success. I’m trying to target the first, second, and third items in a collection list’s output. I want those 3 to not have a border on top of the first div inside the collection item.
To test I have tried targeting the second item, thought the following should have worked, but it hasn’t.
<style>
.top-padd-border{border-top:solid #000000 1px;}
.top-padd-border:nth-child(2){ display:none;}
</style>
You can see it here in the ‘From our Blog’ section, all items have the top border line. https://brand-counsel.webflow.io/think
Should this have worked?
Cheers
Grant
(I just tried the same method to the actual collection item, the testing above is on a div inside the collection Item, and can see that it does work for the Item itself. May have to rethink my approach.)
Check the 2 last experiments here: https://sbx.webflow.io/nth-child-targetting-for-coloring-an-inner-element
To target the first three elements you can use:
<style> .colitem2:nth-child(1), .colitem2:nth-child(2), .colitem2:nth-child(3) {border:none} </style>
But you should target ALL the items BUT the first three, so that you’re using a simpler declaration:
<style> .top-padd-border:nth-child(1n+4) {border-top:solid #000000 1px;} </style>
(you have display:none in your code I assume you meant border:none)
Thanks for the reply. Yes, indeed, I meant border:none.
Your method for targeting the ‘item’ is perfect and works well (and I’ve modified my output so that it works now https://brand-counsel.webflow.io/think, thanks again), but it looks like there’s no way of targeting elements inside the item, I wasn’t clear in my initial question. Is that correct? Other than having a conditional switch method as you mentioned above?
Grant
This is a supported feature now here:
https://webflow.com/feature/style-first-last-even-and-odd-items-in-collection-lists
@Vincent Hey, sorry for messaging, you just seem to know a lot about this! Is it possible to place collection list items in different positions on the z-axis using nth-child? I’ve tried using your many bits of advice for others but can’t seem to get it to work. Any guidance would be really appreciated!
Yes it should be possible.
@Vincent Thank you! I was just about to post and say that I figured it out using snippets of different advice you’ve given.
For anybody else:
<style>
.collection-item:nth-child(1) {
transform: translate3d(0px, 0px, -500px);
</style>
and target each one individually 