Is it possible to use custom code in Webflow to give each item in a collection list its own unique class, so that they can have different attributes without affecting the entire list?

To give each item in a Webflow Collection List its own unique class via custom code, follow these steps.

​

1. Assign Custom Attributes

• Add custom attributes to each collection item.
• This is done in the designer by selecting a Collection Item.
• Use something like data-id and bind it to a unique field (e.g., the CMS item ID).

​

2. Use Custom Code in the Page’s Settings

• Navigate to the page settings where your collection list is being used.
• In the Head or Footer code section, add a script that selects each collection item.
• Add a unique class to each item using JavaScript. For example, $(".collection-item-wrapper[data-id='ID']").addClass("unique-class-ID");.

​

3. Publish and Check Result

• Publish the site to apply the changes.
• Check that each item now has its unique class applied as per the custom code.

​

Summary

By using custom attributes and JavaScript, it's possible to dynamically assign unique classes to collection list items in Webflow. This allows you to style each item individually without affecting the entire list.