How can I change the font color of every even item in a Webflow collection list?
TL;DR
- Open Webflow Designer, select the project, and access the Collection List element.
- Add a CSS class to a collection item, then in Project Settings > Custom Code, add a
<style>block with:nth-child(even)selector for even item font color. - Publish your site to apply changes.
To change the font color of every even item in a Webflow collection list, you need to apply a specific style using CSS.
1. Open the Webflow Designer
- Go to your Webflow Dashboard and select the project you wish to edit.
- Open the Designer tool to access your project's design and style settings.
2. Access the Collection List
- Locate your Collection List element within the structure panel.
- Ensure you have selected the correct Collection Item to which styling will be applied.
3. Add a Custom CSS Class
- Select one of the collection items and go to the Styles panel.
- Create a new class or use an existing one for styling purposes.
4. Apply Even Item Styling
- Within the Designer, you may not have direct control over even items using just the UI. You need to add custom CSS.
- Go to Project Settings and navigate to the Custom Code section.
- In the Before </body> tag box, insert a style block:
```css
<style>
.your-collection-class:nth-child(even) {
color: #yourcolor;
}
</style>
```
- Replace
.your-collection-classwith the class name you assigned. Replace#yourcolorwith the desired hex color code for even items.
5. Publish Your Site
- Save your changes and publish your site to see the effects take place live.
Summary
To change the font color of every even item in a Webflow collection list, apply a custom CSS using the nth-child(even) selector in the Project Settings under Custom Code. This method allows you to target and style even items specifically. Ensure you publish your changes to see the updates live.