select elements multiple of 3 in parent element

Question

is there a way to select with css, elements which have the index multiple of 6 inside a parent element?

for example, in this case i want to choose only multiple of 3:

<div>
    <p></p>
    <p></p>
    <p></p> <!--to select -->
    <p></p>
    <p></p>
    <p></p> <!--to select -->
    <p></p>
    <p></p>
    <p></p> <!--to select -->
</div>

Answer 1

Use :nth-child(n):

p:nth-child(3n) {
  background: red
}

Demo: http://jsbin.com/azehum/4/edit

This method works in IE9+ (source: caniuse.com). If you need support in older browsers, you could use jQuery to select the elements and add a class to them:

$("p:nth-child(3n)").addClass("redbg");