Css nth-child selector on n floating elements

Question

How can I use the nth-child(...) CSS selector for floating elements to achieve this result?

 <ol> <li style="background: red;">Text</li> <li>Text</li> <li>Text</li> <li style="background: red;">Text</li> <li style="background: red;">Text</li> <li>Text</li> <li>Text</li> <li style="background: red;">Text</li> <li style="background: red;">Text</li> <li>Text</li> <li>Text</li> <li style="background: red;">Text</li> <li style="background: red;">Text</li> <li>Text</li> <li>Text</li> <li style="background: red;">Text</li> <li style="background: red;">Text</li> <li>Text</li> <li>Text</li> <li style="background: red;">Text</li> </ol> 

Demo

Answer 1

You can use 4n+1 for odd choices on LHS and 4n for choices on RHS.

 ol li:nth-child(4n+1), ol li:nth-child(4n) { background: red; } 

 ol { width: 270px; padding-left: 10px; } li { float: left; width: 100px; margin: 0 15px; } ol li:nth-child(4n+1), ol li:nth-child(4n) { background: red; } 

 <ol> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> <li>Text</li> </ol> 

Updated jsfiddle