# Flex Repeater Alternating Row Colors using CSS

**URL:** <https://forum.inductiveautomation.com/t/flex-repeater-alternating-row-colors-using-css/99123>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [November 26, 2024, 2:54pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-alternating-row-colors-using-css/99123 "2024-11-26T14:54:49Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![djs](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@djs](https://forum.inductiveautomation.com/u/djs)\
**Post date:** [November 26, 2024, 2:54pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-alternating-row-colors-using-css/99123/1 "2024-11-26T14:54:49Z")

</div>

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:

```python
.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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/6/26a6cbf4df73ac08ea1064bb9dfd0922243b5a57.png)

This is the result:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/9/d97503433d38050bfed75167d1ff41dc08a7024d.png)

---

<div class="post-metadata">

**Author:** ![djs](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@djs](https://forum.inductiveautomation.com/u/djs)\
**Post date:** [November 26, 2024, 2:56pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-alternating-row-colors-using-css/99123/2 "2024-11-26T14:56:34Z")

</div>

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

> **[Pseudo-classes - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#tree-structural_pseudo-classes)**
>
> A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button...