CSS select every other pair element

Question

I have a simple unordered list.

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Forth item</li>
  <li>Fifth item</li>
  <li>Sixth item</li>
</ul>

I need to be abel to select every other element in pairs. So basically, I need the first + second, fifth + sixth, and so on as the pattern will repeat indefinitely.

I want to avoid using javascript as this will be an angular app, so I don't to do any DOM manipulation.

I've tried messing with nth-child() equations but can't figure out what equation will give me what I need. Any ideas? Any help is appreciated!

Answer 1

You could do something like this

li:nth-child(4n+1), li:nth-child(4n+2) {
  color: blue;
}

example on codepen: http://codepen.io/erikL/pen/qyeKc/

Answer 2

you can select every fourth item minus 3 and 2 to include the first 2 one:

li:nth-child(4n-3),
li:nth-child(4n-2)

DEMO

Answer 3

Just an update: now it is possible to use keywords odd and even. Example: p:nth-child(even){...}