Search code examples
csscss-tables

CSS Even&odd affect the thead

I use even & odd CSS rule for a table but that's also the changing <thead>.

thead {background-color: #999;}
tr:nth-child(even) {background: #fff}
tr:nth-child(odd) {background: #C8C8C8}

The result is that my <thead> is #C8C8C8 and not #999.

So my question is, is that possible to use even & odd without that's affect the <thead>?

Solution

  • You can add tbody to you selector so that the rule only applies to tr:s within your tbody:

    tbody tr:nth-child(even) {background: #fff}
tbody tr:nth-child(odd) {background: #C8C8C8}