A question on nth CSS

Question

I have 12 divs.

I need to select the ones marked THIS. I was thinking some sort of nth child magic?

Thanks!

ie.

<div class="feature"></div>
<div class="feature"></div> -> THIS
<div class="feature"></div>
<div class="feature"></div>
<div class="feature"></div> -> THIS
<div class="feature"></div>
<div class="feature"></div>
<div class="feature"></div> -> THIS
<div class="feature"></div>
<div class="feature"></div>
<div class="feature"></div> -> THIS
<div class="feature"></div>

Answer 1

You can use the nth-child pseudo-selector with a number expression:

div.feature:nth-child(3n+2) {
    background-color:#cccccc;
}

3n+2 means every third row starting with the second row.

By the way, the link at SitePoint says that all modern browsers except IE8 support have full support. IE9 has full support, but make sure you are not in compatibility mode.

Answer 2

Building off ob Sarfraz's answer, N can be set to 3n - 1

.feature:nth-child(3n-1){ ... }

Answer 3

You're looking at needing the selector :nth-child(3n+2).

Reference: http://css-tricks.com/examples/nth-child-tester/