Using nth-child to create a chess pattern

Question

I rack my brains to achieve something quite simple here.

I need to select every third and fourth elements on my page, how can I do this using css: nth-child ()?

JS answers are also welcome.

Thank you very much.

*** EDIT

Sorry guys, my question was poorly written. I have attached an example below of what I need.

This is the result I need, http://jsfiddle.net/8FXL6/

<li></li> <li class="highlight"></li> <li class="highlight"></li> <li></li> <li></li> etc 

No hardcoding class names.

Answer 1

 *:nth-child(3),*:nth-child(4){ } 

Technically, this selects each element, which is the third or fourth child element in the container. If you want to select every third or fourth element (3,4,6,8, etc.), Use:

 *:nth-child(3n),*:nth-child(4n){ } 

Demo

From your edit you need:

 li:nth-child(4n-2),li:nth-child(4n-1){ } 

Demo

Answer 2

You can use a comma to combine selectors using nth-child to get the elements,

Live demo

 elements = $('div .className :nth-child(3), div .className :nth-child(4)'); 

Answer 3

How about using only css?

Every third element:

 *:nth-child(3n+3) {color: red} 

Every fourth element:

 *:nth-child(4n+4) {color: blue} 

Here's the demo on jsfiddle: http://jsfiddle.net/dufsx/

Answer 4

This can only be solved with CSS.

  *:nth-child(4n+2){background:blue;color: white;} *:nth-child(4n+3){background:blue;color: white;} 

Live demo