Question: Is there any way to switch the colors of the rows in a table/grid in CSS or CSS3?

```
<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Votes</td>
        </tr>
    </thead>
    <tbody class="rows">
        <tr>
            <td>Barack Obama</td>
            <td>50%</td>
        </tr>
        <tr>
            <td>Mitt Romney</td>
            <td>48%</td>
        </tr>
    </tbody>
</table>

```

Where for example, odd rows are white and even rows are blue.

```

.rows tr:odd
{
    background-color: White
}
.rows tr:even
{
    background-color: blue
}

```

Or is that not possible?

Answer: 
Both :nth-of-type and :nth-child pseudo elements will work.

I like the nth-of-type method:

```
/* Zebra striping */

  tr:nth-of-type(odd) { 
    background: blue; 
    }

    tr:nth-of-type(even) { 
    background: white; 
    }

```
Use the [`nth-child`](http://www.w3.org/TR/selectors/#nth-child-pseudo) pseudo class:

```
.rows tr:nth-child(odd)
{
    background-color: white;
}
.rows tr:nth-child(even)
{
    background-color: blue;
}​

```

[Demo](http://jsfiddle.net/jBEcu/)