How can I dynamically change the background of every other item in a collection list in Webflow?
TL;DR
- Use Webflow's Collection List settings to add and bind a collection list to a CMS collection, styling the item layout.
- Create a Combo Class for the first item, set the desired background color, and add custom CSS in the site settings to style every even-numbered item.
To dynamically change the background of every other item in a collection list in Webflow, you can utilize the CMS collection list settings and some custom styling.
1. Use Webflow's Collection List Settings
- Add a Collection List element to your Webflow project where you want the items to appear.
- Bind the collection list to your desired CMS collection.
- Design your item layout as needed, setting up the basic styles for all items.
2. Style Every Other Item
- Select the first item in the collection list.
- Create a new Combo Class on this element, for example,
Item-1. - Set the desired background color or styling for the first item.
3. Utilize Custom Code for Alternate Styling
- Add custom code to target every other item. While you can't use raw HTML or
<script>tags directly, you can apply a CSS styling. - Use this CSS in the "Custom Code" section of your site settings:
```css
.collection-item:nth-child(even) {
background-color: #f0f0f0; / Your alternate color /
}
```
4. Publish and Test
- Publish your site to see changes take effect.
- Check the collection list to ensure every other item has the updated background styling as intended.
Summary
To dynamically change the background of every other item in a Webflow collection list, style the first item with a combo class, then use custom CSS to apply alternate styling to every even-numbered item in your collection. This allows for visually alternating backgrounds.