00:00
Buy Me a Beer
CMS

Add custom style to Collection Items in Webflow (nth Child)

Easily add unique designs to Webflow CMS Collection Items with No-Code using nth Child

Blog Category G
Blog Category F
Blog Category E
Blog Category D
Blog Category C
Blog Category B
Blog Category A

How to style and customise Collection Items in Webflow

Firstly, make sure you have the VisualDX script before your </body>. Checkout the Quick Start for how to do this.

Add Nth Child Attribute

Copy this attribute:

vdx-nth-child

Select the Collection List of a Webflow CMS Collection and paste the attribute into the Custom Attributes Name field of a Webflow Collection List

Collection List Wrapper
Collection List
Collection Item
Blog Category G
Collection Item
Blog Category F
Collection Item
Blog Category E
Collection Item
Blog Category D
Collection Item
Blog Category C
Collection Item
Blog Category B
Collection Item
Blog Category A
Collection List
Style
Settings
Interactions
Collection List Settings
Custom Attributes
Name
vdx-nth-child
Value

Target Collection Item

Copy this attribute:

vdx-nth-child

Add a Value to select the child element. eg. a Value of 3 selects the third element of the Collection Items.

Value 1 selects the first element of div siblings.

Value 2 selects the second element of div siblings.

etc, etc.

Collection List Wrapper
Collection List
Collection Item
Blog Category G
Collection Item
Blog Category F
Collection Item
Blog Category E
Collection Item
Blog Category D
Collection Item
Blog Category C
Collection Item
Blog Category B
Collection Item
Blog Category A
Collection List
Style
Settings
Interactions
Collection List Settings
Custom Attributes
Name
vdx-nth-child
Value
3

Add Nth Child Combo Class

Copy this combo class:

vdx--nth-child-

Paste the combo class into a style selector of your Collection Item and/or each the children of the Collection Item.

Add the Value from the previous step to the end of the combo class.

In this example the Value is 3 therefore the combo class is:
vdx--nth-child-3


If vdx-nth-child has a value of 1, then the combo class is:
vdx--nth-child-1

If vdx-nth-child has a value of , then the combo class is:
vdx--nth-child-2

etc etc.

Collection List Wrapper
Collection List
Collection Item
Blog Category G
Collection Item
Blog Category F
Collection Item
Blog Category E
Collection Item
Blog Category D
Collection Item
Blog Category C
Collection Item
Blog Category B
Collection Item
Blog Category A
Collection item
Style
Settings
Interactions
Style Selector
Collection Item
vdx--nth-child-3

Style Nth Child Combo Class

Style each of the combo classes. eg. change the background colour.

Collection List Wrapper
Collection List
Collection Item
Blog Category G
Collection Item
Blog Category F
Collection Item
Blog Category E
Collection Item
Blog Category D
Collection Item
Blog Category C
Collection Item
Blog Category B
Collection Item
Blog Category A
Collection item
Style
Settings
Interactions
Style Selector
Collection Item
vdx--nth-child-3
Backgrounds
Image & Gradient
Color
#888680

Remove the combo class and Publish

Blog Category G
Blog Category F
Blog Category E
Blog Category D
Blog Category C
Blog Category B
Blog Category A

How to loop custom styles through Webflow Collection Items

Using a formula (an + b). Description: a represents an integer step size, n is all non negative integers, starting from 0, and b is an integer offset value.

Add a 5n+2 to the Value input to Style every 5th Collection Item starting at the 2nd Collection Item

Collection List Wrapper
Collection List
Collection Item
Blog Category G
Collection Item
Blog Category F
Collection Item
Blog Category E
Collection Item
Blog Category D
Collection Item
Blog Category C
Collection Item
Blog Category B
Collection Item
Blog Category A
Collection List
Style
Settings
Interactions
Collection List settings
Custom Attributes
Name
vdx-nth-child
Value
5n+2

Add Nth Child Loop Combo Class

Using a formula (an + b). Description: a represents an integer step size, n is all non negative integers, starting from 0, and b is an integer offset value.

Add a 5n+2 to the Value input to Style every 5th Collection Item starting at the 2nd Collection Item

Collection List Wrapper
Collection List
Collection Item
Blog Category G
Collection Item
Blog Category F
Collection Item
Blog Category E
Collection Item
Blog Category D
Collection Item
Blog Category C
Collection Item
Blog Category B
Collection Item
Blog Category A
Collection Item
Style
Settings
Interactions
Style Selector
Collection Item
vdx--nth-child-5n-2
Backgrounds
Image & Gradient
Color
#f6f6f5

Remove the Nth Child Loop Combo Class and Publish

Blog Category G
Blog Category F
Blog Category E
Blog Category D
Blog Category C
Blog Category B
Blog Category A

How to Target Multiple Nth Child Webflow Collection Items

Add multiple values separated by commas in to the Value input.

Using the two previous examples we need to add 5n+2 followed by a comma and the number 3.

eg. 5n+2, 3

Collection List Wrapper
Collection List
Collection Item
Blog Category G
Collection Item
Blog Category F
Collection Item
Blog Category E
Collection Item
Blog Category D
Collection Item
Blog Category C
Collection Item
Blog Category B
Collection Item
Blog Category A
Collection List
Style
Settings
Interactions
Collection List Settings
Custom Attributes
Name
vdx-nth-child
Value
5n+2, 3

Publish

Blog Category G
Blog Category F
Blog Category E
Blog Category D
Blog Category C
Blog Category B
Blog Category A

Sponsor the Magic and
Buy Me a Beer

Ailín Tobin
Ireland

VisualDX is a free JavaScript library made for Webflow nerds like yourself. No ads, no paywalls—just pure, unfiltered JavaScript magic to supercharge your builds. If it’s saving you time, making your development easier, or just making you feel like a wizard in the Webflow Designer, consider slinging a virtual coffee my way.

Think of it like buying me a pint for keeping your Webflow spells flowing.

You can support it here.

Cheers, legend!

This is a method based on community and soundness. If you can't afford it, don't worry... One of your fellow Webflow nerds has already helped you out by donating.