Is it possible to select every other group of three in CSS?

Question

Is it possible to select every other group of three in CSS? And if it is; how?

So in the sample below apply style to the 4-6 and 10-12 lis.

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
     <li>10</li>
     <li>11</li>
     <li>12</li>
</ul>

I know [pure] JavaScript and jQuery can do this but I am looking for a pure CSS solution if it exists.

Answer 1

You're looking for nth-child:

ul li:nth-child(6n+4),ul li:nth-child(6n+5),ul li:nth-child(6n+6) {
    background:red;
}

http://jsfiddle.net/bhlaird/utEP4/1/

Answer 2

You could achieve this with a single selector, using a combination of :not and :nth-child.

ul > li:not(:nth-child(6n+1)):not(:nth-child(6n+2)):not(:nth-child(6n+3))  {
    color:blue;
}

jsFiddle here

Using that selector by itself is pretty useless, though, considering you cannot style the other elements.

ul > li:not(:nth-child(6n+4)):not(:nth-child(6n+5)):not(:nth-child(6n+6))  {
    color:red;
}

Using a combination of both will allow you to style everything, see the demo.