Add CSS to rows of inline list based on condition

[cheeseman30]

Ok, so I am very familiar with CSS, and use it a lot in my app, but I think I’ve stumbled upon something I can’t do. Maybe someone has a good idea.

I have an inline list that shows predicted sports scores of matches. What I want to do is change the color of the title element of a list entry based on conditions. I’ve already created an If-then-else column and template column to create the CSS code I want for each row, as you can see in the picture below:

But how do I apply that to my list so it effects each row differently? When I put that template into a rich text component below the list, it just uses the CSS from the top row and applies it to the whole inline list, it doesn’t use the dynamic CSS for each row list entry. Is there any way to do this?

[ThinhDinh]

I think what you need to do here is targeting the “data-index” part.

Each item in the list will have that index, and you must figure out the index of each row based on the sort option in your settings.

Then, once you get that, target each data-index item, set the color accordingly. Leave out the pre-span-style part.

Create a joined list column to join all values from the column above.

Finally, create a template column to append the pre-span-style part at the top. Use that in your rich text component.