Can I select any other group of three in CSS?

Question

Can I select any other group of three in CSS? And if so; as?

So, in the example below, apply the style to 4-6 and 10-12 li s.

 <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 are 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

This can be done using 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 this selector in itself is pretty useless though, given that you can't style 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 a demonstration .