CSS siblings after a class

Question

I'm currently able to get a zebra table by doing the following:

tbody
  tr:nth-child(2n+2)
    background-color: #f3f7f9

  tr:nth-child(2n+1)
    background-color: #fff

  tr.row-headers + tr
    background-color: #fff

  tr.row-headers + tr + tr
    background-color: #f3f7f9

For the rows after the tr.row-headers, I'm able to force the 1st row to be #fff and the 2nd to be #f3f7f9 using "+ tr" and "+ tr + tr" respectively, but I don't want to have to do this for the remainder of the rows following. I tried the nth-child(2n+1) and nth-child(2n+2) instead of the "+ tr" method but that doesnt seem to work. Any ideas?

Maybe answers to [this question](http://stackoverflow.com/questions/17458582/css-selectors-nth-childeven-odd-with-class/) can help? — Ilya Streltsyn, Jul 11 '13 at 23:33

score 1 · Answer 1 · answered Jul 11 '13 at 23:23

tr:nth-child(even) { background-color: #fff; }

tr:nth-child(odd) { background-color: #f3f7f9; }

Is that what you're after?

Live example

or in the other syntax:

tbody
  tr:nth-child(even)
    background-color: #f3f7f9

  tr:nth-child(odd)
    background-color: #fff

CSS siblings after a class

1 Answers1