locked
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

    Monday, December 15, 2014 2:54 PM

All replies

  • 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

    Tuesday, December 16, 2014 5:27 AM
  • 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

    Wednesday, January 7, 2015 11:55 PM