How to alternate rowcolor in a GridView using pure CSS?

Question

I want to alternate rowcolor in a GridView, using pure CSS, ie: I don't want to use asp.net themes; I'd rather not have to use jQuery, or define define AlternatingRowStyle-BackColor on each gridview (unless there's a reason I must).

Here's my CSS (that isn't working):

.gridView {font-size:11px
}

.gridView tr:nth-child(even) {background-color: #FFF}
.gridView tr:nth-child(odd) {background-color: #FFCC00}

.gridView tr:nth-child(even) td {background-color: #FFF}
.gridView tr:nth-child(odd) td {background-color: #FFCC00}

(I included the .gridView {font-size:11px} just to confirm I am using the proper CssClass.)

Is this not possible, or am I doing something wrong.

Answer 1

You are using CSS3, which is not supported by all browsers. To do this in a cross-browser compatible way you need to use alternating class, jQuery, or some other method to do this.

The alternating class is a fairly elegant way to do so, IMHO.

UPDATE: This shows the gridview way:

<asp:gridview id="CustomersGridView" runat="server">        
    <RowStyle CssClass="Row" />
    <AlternatingRowStyle CssClass="AltRow" />
</asp:gridview>