Style first, last, odd, even items in your CMS

Structure styles allow us to create specific styles for elements in a dynamic list. This gives us the chance to highlight elements in a list to improve visual hierarchy.

This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

In this lesson:

  1. Structure selectors and style
  2. Dynamic elements
  3. Style inheritance

Structure selectors

To apply styling to specific dynamic list positions (e.g., the first item) open the States dropdown menu in the Selector of the Style panel and select the item(s) you want to style.

First and Last item

You can add style to the first or last item in your dynamic list by doing the following:

  1. Select a dynamic item (i.e., Collection item)
  2. Select First item, or Last item, in the States dropdown menu
  3. Add style properties in the Style panel

This will add style properties to the first or last item in your dynamic list.


This is great to highlight these particular elements and give your design a better visual hierarchy. For example, you can draw attention to the newest blog post from your blog list by adding background and text styles to the first item.

Odd and Even items

To style odd or even items in your dynamic list:

  1. Select a dynamic item (i.e. Collection item)
  2. Select Odd items, or Even items, in the States dropdown menu
  3. Add style properties in the Style panel

This will add style properties to the odd- or event-numbered items in your dynamic list.


Styling your list elements like this visually breaks up your list so elements can be distinguished between each other more easily. For example, you can break up your list by adding background and text styles to the odd-numbered items (first item, third item, fifth item, etc.) so that someone can more easily see each item separately.

Dynamic elements

You can style elements like Collection lists on static pages, or a list of dynamic elements on a Template page.

Ecommerce

You can also style dynamic elements on the Ecommerce pages.

For example, you can style the list of items added to someone's cart when they visit the Checkout and Order confirmation page.

You can also add interactivity to your elements by changing the way they look and behave in different States. Learn about interactive States.

Style inheritance

All states inherit styles from the None state. You can see from where styles are being inherited by clicking the inheritance indicator right above the selector field.

After you’ve added styles to a state, the States menu dropdown icon will turn blue. And when you open the States dropdown menu, you will see blue circles showing that there are styles in whatever state that’s been styled.


And that’s styling specific Collection items in Webflow!

Clone this project
Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback