Simple Table Zebra Striping with CSS3

Zebra Striping – the name given to having alternating background colors on every other row or column, is a very simple task with CSS3’s Nth Child Pseudo-classes.

It wasn’t always so easy, especially if you did not (or could not) do it manually. Luckily we don’t have to worry about that, as we now have the ability to style every odd or evened numbered sibling elements.

So get your tables ready and take a look at just how easy this is. Below is the CSS for the table in the image shown above.

The CSS – Striping Every Other Row

/* This is the style for our default (even) row */

tr {
  background-color: #FFF;
}

/* This is the style for our striped (odd) row */
tr:nth-child(odd) {
  background-color: #B3BAC7;
}

That’s all it takes! You can use the Nth-Child Pseudo-Class on elements besides table rows too. Styling list-items <li> and definition list-items <dt> and <dd> might also be an interesting endeavour.