Editing css properties of items in a collection list

I want to make the BG color that is currently green, change on a repeated basis. So 1st item, green. 2nd item, blue. 3rd item, red, and then repeat. Is there a way to target this items bg and set up a system where it will automatically change as described above? I am not changing the collection item BG so I dont believe it can be done natively. Any help would be very much appreciated.
Sorry I can’t post a read-only or link but maybe someone can help me.

Hi Cam,

Webflow doesn’t currently have a native way to target the “nth-child” property but it can be achieved with a couple of lines of CSS which you should put in the head of the page.

Nth-child is not the easiest CSS syntax to learn IMO but CSS tricks has a great tool to test nth child.

Without seeing the site and knowing your class names, I can’t give you the exact CSS you’d need but it might be something like this:

/* select the icon inside every third card starting on the second card */
.card:nth-child(3n+2) .icon{
  background: blue;
}
/* select the icon inside every third card starting on the third card */
.card:nth-child(3n+3) .icon {
  background: red;
}
</style>
1 Like

Thanks you soooo much! This worked perfectly. Your comment will help me for years to come with. You rock!

1 Like