Recently

See 172 more →

Unique Styles for each collection item

• Updated Mar 24, 20251 min read

  • Webflow has the ability to style each collection item, but not its children
  • Using CSS (HTML Embeds) we can customize a collection item’s children

Nth Child

  • using 3n for example, will style the first three in the collection before it restarts. 4n will style the first four, etc.
<style>
.your-collection-item:nth-child(3n+1) .item-inside-collection-item { CSS: here; }
.your-collection-item:nth-child(3n+2) .item-inside-collection-item { CSS: here; }
.your-collection-item:nth-child(3n+3) .item-inside-collection-item { CSS: here; }
</style>

Even/odd

<style>
.your-collection-item:nth-child(even) .item-inside-collection-item { CSS: here; }
</style>

<style>
.your-collection-item:nth-child(even) .item-inside-collection-item { CSS: here; }
</style>

First/Last

<style>
.your-collection-item:first-child .item-inside-collection-item { CSS: here; }
</style>

<style>
.your-collection-item:last-child .item-inside-collection-item { CSS: here; }
</style>

title: "Unique Styles for Each Webflow Collection Item (nth child)"
image: "https://i.ytimg.com/vi/GwSf9KGLn5w/maxresdefault.jpg"
description: "Join my Webflow Wizards Communityhttps://www.patreon.com/timothyricksNeed collection items to look different from each other? In this tutorial, we’ll cover h…"
url: "https://youtu.be/GwSf9KGLn5w?si=cwPQM_eubj2nAcUB"

Graph View