Add margin to every 2nd, 5th, 8th, 11th etc. class element

Question

I have a webpage filling with a variabel number of the same class elements. I want to set a left and right margin to every 2nd, 5th, 8th, 11th etc. class (if present).

Is there a way to achieve this with javascript? I don't want to use css3 child selectors, because of it's non-compatibility on older browsers.

My divs are placed like this:

[div class="block"][div class="block"][div class="block"]

[div class="block"][div class="block"][div class="block"]

[div class="block"][div class="block"][div class="block"]

[div class="block"][div class="block"][div class="block"]

I want every middle div to have a margin left and right.

Thank you. :)

Answer 1

Try use nth-child selector from jQuery

$('div:nth-child(3n - 1)').css('margin-top', '10px')

Demo: Fiddle

Answer 2

Try this.

i = 2;
block(i);

function block(i) {

    $(".block:eq(" + i + ")").css({"margin-left":"10px" ,"margin-right":"20px" });

    i = i + 3;

    block(i);

}

Answer 3

If you don't want to use CSS3 child selectors, you'll have to do it on either the server side or using JavaScript.

As you have tagged the answer with jQuery I'm assuming that is your preferred choice, so you could try something like:

$('.block:nth-child(3n+2)').addClass('middle');