Style items collection CMS Webflow

Tutorial
March 20, 2023
3 min
Webflow tutorial and yellow power icon digidop
Key points

Did you know that you can modify the style of the first item, the last item, or the even and odd items in a Webflow collection? This feature is now available in the Webflow Designer, and we will show you how to use it!

Step 1: Add a Collection to One of Your Pages

You can skip this step if you have already inserted a CMS Collection into one of your pages. If not, log into your Webflow account, go to your project Designer, and then insert the "Collection List" element into one of the sections on your page.

Adding collection list element in webflow

Step 2: Select the Collection Item Element

When you add a collection element in the Designer, the hierarchical order includes the Collection List Wrapper, the Collection List, and then the Collection Item which is inserted into your project. To utilize the style modification feature for specific items, you need to select the Collection Item in the navigator. At the same time, you can assign a class to it!

selecting collection item cms webflow

Step 3: Choose a Structure Type in the Selector

Next to your class in the Style Manager's selector, there's a small downward-pointing arrow. This arrow is typically used to modify the style of an element when it has a special status (On Hover, Pressed, Focused, etc.). When you select the "Collection Item" element, new fields that correspond to the statuses will appear; these are structure fields. In these new fields, we have First Item, Last Item, Odd Item, and Even Item.

Depending on your project and website layout, choose one of the structures!

selecting collection item state cms webflow

Step 4: Modify the Style of the Custom Structure

Once you have chosen a structure (first, last, even, or odd), you can apply and create the desired style (a custom style) and design your personalized collection!

4.1 Style the First Item in a Webflow Collection

style first item collection list cms webflow

4.2 Style the Last Item in a Webflow Collection

style last item collection list cms webflow

4.3 Style the Even Items in a Webflow Collection

style even items collection list cms webflow

4.4 Style the Odd Items in a Webflow Collection

style odd items collection list cms webflow

Now you know how to modify the style of specific items in your collection using the various states of the Webflow selector. This feature can be particularly useful when creating e-commerce sites or blogs (learn how to create an SEO-friendly blog in Webflow).

To learn more about elements in Webflow, feel free to read our article on the subject! You can also subscribe to our newsletter to stay updated with our latest articles and contact our agency for your online visibility needs!

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Suggested articles

black and white photo of a digital marketing expert from behind presenting a communication project on his computer to a customer.
News
SEO

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025
2025 SEO Stats
Documentation
SEO

SEO Trends 2025: 20 Stats to Boost Your Search Rankings

SEO Trends 2025: 20 Stats to Boost Your Search Rankings
A 3D shiny diamond with “Site of the Day” written in the background and four awards displayed in the front.
Storytelling
Digidop

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Want to turn your website into your most valuable asset?

Contact us today