CSS Every other LI element but in pairs of two
css, css-selectors, html
Solution
Try:
li:nth-child(4n + 1), li:nth-child(4n + 2) {
background-color: green;
}
li:nth-child(4n + 3), li:nth-child(4n + 4) {
background-color: blue;
}
li:nth-child(4n + 1), li:nth-child(4n + 2) {
background-color: green;
}
li:nth-child(4n + 3), li:nth-child(4n + 4) {
background-color: blue;
}
<ul>
<li>Item 1 Group 1</li>
<li>Item 2 Group 1</li>
<li>Item 1 Group 2</li><!-- Make BG Blue -->
<li>Item 2 Group 2</li><!-- Make BG Blue -->
<li>Item 1 Group 3</li>
<li>Item 2 Group 3</li>
<li>Item 1 Group 4</li><!-- Make BG Blue -->
<li>Item 2 Group 4</li><!-- Make BG Blue -->
<li>Item 1 Group 5</li>
<li>Item 2 Group 5</li>
</ul>
Problem
I have a CSS issue in which I need to select every other PAIR of elements and change the background-color accordingly. I CANNOT add additional classes to the pairs, I have been trying to use a combinations of `:nth-child` in order to find a solution. Wondering if anyone has done this before and can point me in the right direction ``` ul li:nth-child(2n + 1) { background-color: blue; } ul li:nth-child(2n + 0) { background-color: blue; } ul li:nth-child(3n + 0) { background-color: green; } ul li:nth-child(4n + 0) { background-color: green; } <ul> <li>Item 1 Group 1</li> <li>Item 2 Group 1</li> <li>Item 1 Group 2</li><!-- Make BG Blue --> <li>Item 2 Group 2</li><!-- Make BG Blue --> <li>Item 1 Group 3</li> <li>Item 2 Group 3</li> <li>Item 1 Group 4</li><!-- Make BG Blue --> <li>Item 2 Group 4</li><!-- Make BG Blue --> <li>Item 1 Group 5</li> <li>Item 2 Group 5</li> </ul> ``` http://jsfiddle.net/qpDUf/