Apply CSS style to alternating columns of Listview

Question

I would like to apply a specific CSS style to item for alternating column of a Listview. Is there a way to do that? Since a listview is dynamic and the number of columns and rows that are render depends on the size and resolution of display, the number of items in a column will change.

Thank you.

Christine

MCSD, MCITP, MCTS

Answer 1

If you could consider the alternating colours a progressive enhancement and not absolutely required in all (old) browsers then you could use a CSS n-th child selector to apply the colour without changing the HTML. 

If you have jQuery (or similar) in your project already and want a solution for older browser, you could use that to select every other row with the :odd or :even selector.

Update (Example)

Assuming we are using table rows

tr:nth-child(odd) td{  
  background-color: red;  
}

You can also use even, 2n or 2n+1. This would work equally well with <li> tags.

More examples: http://reference.sitepoint.com/css/pseudoclass-nthchild

Answer 2

Thank you for your reply and thoughts. I'm not sure it can be applied as this is for a Windows Store App, not browser based. And I'm using the WinJS ListView control to display the data. I want to style the alternating columns of the ListView.

Thanks!

Christine