Question

I have an unordered list and each li makes up one item in a two column layout:

col1    col2
1       2
3       4
5       6
7       8
9       10
11      12

I need to have an alternating background colour for each item BUT NOT so each item in one column is the same.

So :

1,4,5,8,9,11 will have one colour; and
2,3,6,7,10,12 will have another colour.

Can this be achieved with one :nth-child rule?

Thanks!

Answer 1

Solved! After some head scratching:

First, set a standard background colour, then use 4n+4 (every fourth item starting from 4th item = 4,8,12 etc) and also 4n+1 (every fourth item starting from 1 = 1,5,9 etc).

li {background:#fff;}
li:nth-child(4n+4), li:nth-child(4n+1) {background:#ccc;}

Thanks all!