Home/ Questions/Q 8523039
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T07:17:49+00:00

Possible Duplicate: nth-child for every two table rows I’m trying to work my way

  • 0

Possible Duplicate:
nth-child for every two table rows

I’m trying to work my way into the CSS3 nth-child selector, but it seems I can’t get it working at the moment.

What I would like to do is make the first 2 rows in a table white, then next 2 rows gray, then next 2 white again and so on. How would I do this using only CSS?

Thanks a lot!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After a little bit of fiddling (literally) I finally hit on an answer:

    CSS: 

    tr:nth-child(4n+0), tr:nth-child(4n-1) {
    background-color: grey;
}​

    Demo: http://jsfiddle.net/SO_AMK/3e4Fz/

    This selects every 4th row starting at 0 and at -1, you can target the rows in between by using nth-child(4n-2) and nth-child(4n-3).

    Demo: http://jsfiddle.net/SO_AMK/nGSfz/

    • 0