Use pseudo-classes to bring visual variety to a Collection List

Out of the box, all Collection Items of a Collection List look strictly identical, minus the differences induced by the CMS data itself. Using pseudo-classes, we can target a particular, or a particular series of items, and style them independently.

We can use the First Item, LastItem, Odd Items and Even Items options, to target the first, the last, all the odd (1st, 3rd, 5h...) or all the even (2nd, 4th, 6th...) Collection Items. Webflow uses the respective pseudo-classes :first-child, :last-child, :nth-child(2n+1) and :nth-child(2n) under the hood for those options.

The number of use cases is large: from giving a tint to every other line of a table, to making the first element of a list stand-out.

  • Select any Collection Item element, make sur it has a class or give it one.

  • Unfold the Selector drop-down menu.

  • Under the Structure area, chose one of the 4 pseudo classes available: First Item, Last Item, Odd Items, Even Items.

  • With any of the Collection Items and the pseudo-class selected, style as desired and see the results live in the Designer.