Flex Repeater Alternating Row Colors using CSS

Didn't see a post about this yet, so I figured I'd share a simple example.This method uses pure CSS, so no need for script transforms. It does require the advanced stylesheet through.

First, put this in your advanced stylesheet:

.psc-flex-repeater-alt-rows:nth-child(odd) {
	background-color: lightblue;
}

.psc-flex-repeater-alt-rows:nth-child(even) {
	background-color: lightgreen;
}

(flex-repeater-alt-rows is the class name, while lightblue and lightgreen are the colors. These can be changed to whatever you want.)

Then simply reference this class in your flex repeater under the elementStyle prop:
image

This is the result:

1 Like

If you'd like to learn more about CSS pseudo-classes, here's a starting point: