Alex Rivera | Logout

select elements multiple of 3 in parent element

Asked 2012-05-17T16:23:19.333
16

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>
css css-selectors
Edit
Report

1 Answer

34

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");
answered 2012-05-17T16:27:50.753

Your Answer