css3 nth child question
- by JCHASE11
Hello. I am designing a 960px wide layout with an unordered list. Each list item is 240px wide, so 4 list items fit horizontally in a row. I have about 20 rows on the page....
I want every other list item to have a background of #ececec, so my css would be:
ul li:nth-child(2n+2){
background-color:#ececec;
}
This works. The only problem is because there are 4 items in a row (an even #), the next row would be identical, thus rendering background colors on every 1st and 3rd list items in a row. This is not the effect I am looking to achieve. I want the background colors to alternate, creating a grid-like effect. What is the correct css to do so (think a checker board). Thanks!
