CSS selector: how to style items [1-2][5-6][9-10] etc by pair

css, css-selectors

Solution

Working jsFiddle here.

Use `:nth-child(4n+3), :nth-child(4n+4)`

CSS:

li:nth-child(4n+4), li:nth-child(4n+3) {
  color:red;
}

HTML:

<ul>
    <li>No</li>
    <li>No</li>
    <li>YES</li>
    <li>YES</li>
    <li>No</li>
    <li>No</li>
    <li>YES</li>
    <li>YES</li>
    <li>No</li>
    <li>No</li>
    <li>YES</li>
    <li>YES</li>
</ul>

Problem

I have a list of items, I want style them by group of two, and alternate style between groups. So items [1-2][5-6][9-10] could be `{ background-color: #C0C0C0 ;}` while [3-4][7-8][11-12]... could be `{ background-color: #FFF ;}`. For a result such: - grey - grey - black - black - grey - grey - black - black - grey - grey - black - black - ... Which CSS nth-child formula should I use?

Original source