How to Style Collection Items Using Webflow

Are you looking to create a unique style for every one of your collection items in Webflow? In this tutorial, we'll explore how to achieve this utilizing a powerful feature recently released by Webflow. While the built-in feature allows styling the first item in the list, the last item in the list, or every odd or even item in the list, we'll go a step further and show you how to have full control over styling each item individually using custom code.

Getting Started

To begin, you'll need to have a collection list set up in your Webflow project. Once you have the collection list added to your project and the collection item selected, you can follow these steps to style each item individually.

Alternating Background Colors for Collection Cards

Let's start by creating alternations in background colors for each card within the collection list. To achieve this, we'll utilize custom code embed directly onto the page. Here's how to do it:

1. Drag in a custom code embed directly onto the page.
2. The code we'll use allows us to style each item individually by targeting the children inside the items.

Here's an example of the custom code you can use:

<style>.items:nth-child(3n+1) .article-link {  background-color: #ff0000; /* Red */}.items:nth-child(3n+2) .article-link {  background-color: #0000ff; /* Blue */}.items:nth-child(3n) .article-link {  background-color: #00ff00; /* Green */}</style>

In this code, .items is the class of the collection item, and .article-link is the class of the child element we want to target inside that item. The 3n in nth-child determines the number of items to style before the process repeats. In this example, the background colors will alternate after every 3rd item.

You can adjust the number (3 in this case) based on your specific requirement. For instance, you can change it to 4 to style every 4th item, and so on.

Customizing Background Colors

To customize the background color for each specific item, you can use hex codes for the colors you want to apply. For example:

/* Styling the first item background color */.items:nth-child(3n+1) .article-link {  background-color: #ff0000; /* Red */}/* Styling the second item background color */.items:nth-child(3n+2) .article-link {  background-color: #0000ff; /* Blue */}/* Styling the third item background color */.items:nth-child(3n) .article-link {  background-color: #00ff00; /* Green */}

You can replace the hex codes with the specific colors you want to use for each item.

Customizing Other Elements

If you have other elements inside the collection item that you want to style individually, you can apply the same approach. For example, if you want to style a circle element inside the collection item, you can use the following code:

/* Styling the circle inside the collection item */.items:nth-child(3n+2) .article-circle {  background-color: #0000ff; /* Dark blue */}

In this code, .article-circle is the class of the circle element that you want to style.

Styling Alternating Order

Additionally, you can even style the order of the items to alternate between odd and even items.

.items:nth-child(odd) .article-link {  /* Styles for odd items */}.items:nth-child(even) .article-link {  /* Styles for even items */}

Conclusion

By utilizing custom code, you can have full control over styling each item within your collection list, allowing for a unique design for every item. The ability to apply custom styles to specific items opens up a world of design possibilities and allows you to create a visually appealing and dynamic collection list.

We hope you found this tutorial helpful. If you have any other Webflow tutorials you'd like to see, feel free to let us know in the comments below. Don't forget to check out our channel for more useful YouTube tutorials!