Question

This is best explained with a Fiddle: http://jsfiddle.net/hxsJx/

I want to add a class to the nth-children of an element, but only when those children have a particular class. So in my example, only articles E and J should get the class of ‘end’.

The nth-child selector seems to be ignoring the class selector, which is probably intended behaviour, but I just can’t find a way around it.

Thanks for any pointers folks…

Answer 1

The selector is working as intended. Remember, the CSS :nth-child selector is one-based (it starts counting at one).

The 4nth elements are D and H, which indeed have class 1.

Your selector: .articles article.1:nth-child(4n)

HTML:

<section class="articles">          .articles
<article class="1 4">A</article>        :nth-child(1)
<article class="1 4">B</article>        :nth-child(2)
<article class="2 2">C</article>        :nth-child(3)
<article class="1">D</article>          :nth-child(4)  and  :nth-child(4n) and .1
<article class="1">E</article>          :nth-child(5)
<article class="3 2">F</article>        :nth-child(6)
<article class="1 4">G</article>        :nth-child(7)
<article class="1 2">H</article>        :nth-child(8)  and  :nth-child(4n) and .1
<article class="1 3 4">I</article>      :nth-child(9)
<article class="1 2 4">J</article>      :nth-child(10)
</section>