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: 
You can use the [nth-child](https://developer.mozilla.org/en-US/docs/CSS/%3anth-child) selector to achieve this:

```
.rows tr:nth-child(even) {background-color: #fff}
.rows tr:nth-child(odd) {background-color: blue}

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

```

See [**jsFiddle**](http://jsfiddle.net/zrmrP/)