0

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...

Dan
  • 5,836
  • 22
  • 86
  • 140

3 Answers3

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>
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • No, I don't think so. Compare: http://jsfiddle.net/s2LrG/. The nth-child selector is being ignored. – Dan Feb 22 '12 at 13:33
  • @Dan How is the `:nth-child` selector being ignored? Elements D and H are the 4n-th (4 and 8) child element with respect to their parent, and they both have class `1`. Did you confuse `:nth-child(4n)` with `:nth-child(4n-1)`: http://jsfiddle.net/s2LrG/1/? – Rob W Feb 22 '12 at 13:36
  • Maybe there's confusion in the question... What I'm trying to do with that example is only give a class of 'end' to the nth-children which have a class of '1'. So only articles A, B, D, E, G, H, I and J have the class of '1' so I'm wanting to apply the class to every 4th item of this selection. E and J (the 4th and 8th items which have the class of '1') should be the ones which end up with the class 'end'. – Dan Feb 22 '12 at 13:38
  • I think I get how it works now, thanks to your responses, but it's not how I expected it to work and I'm struggling to do what I want it to. I want to get all articles with a class of '1' and THEN apply a class of 'end' to every nth-child of that selection. Can you see where I'm coming from? Do you know if this is possible? – Dan Feb 22 '12 at 13:48
  • 1
    You're misunderstanding the `:nth-child` selector. It is a true **index-of-child selector**. jQuery/Sizzle doesn't support such dynamic type selectors. You can reduce select such childs, for example using: `$('.articles article.1').filter(function(i){return i%4===0;})` – Rob W Feb 22 '12 at 13:49
  • 1
    @Dan **[This answer](http://stackoverflow.com/a/4761510)** provides an extension to jQuery's set of selectors, which enables the [`:nth-of-type`](https://developer.mozilla.org/en/CSS/:nth-of-type) selector for jQuery. – Rob W Feb 22 '12 at 13:56
  • The nth-of-type selector is what I need. Thanks! Here's a fiddle to demonstrate: http://jsfiddle.net/ScxCc/ – Dan Feb 22 '12 at 14:03
0

Try Lettering.js http://letteringjs.com/

Connor
  • 1,024
  • 4
  • 16
  • 24
0

No, Rob W is right. 

//$('.articles article').removeClass('end');
$('.articles article.1:nth-child(4n)').addClass('end');​

Makes D and H the target, but if you set it to 

//$('.articles article').removeClass('end');
$('.articles article.1:nth-child(5n)').addClass('end');​

E and J become the target.

EDIT: The 4th Child is D and H. D is equal to 4 and H is equal to 8. 

1 = A
2 = B
3 = C
4 = D

etc, you're getting your numbers mixed up. E and J are the 5th and 10th children, respectively.

  • Yep, I can see that this is probably how it's supposed to be (I've not unearthed a great big bug in jQuery :)) but I'm struggling to get across what I'm actually wanting to do. I essentially want to do this in two parts: First, get all articles which have a class of '1'. Then apply a class of 'end' to every 4th item of that particular selection. What it's doing at the moment is taking the nth-child and adding the class if it has a class of '1'. What I want to do is only take the articles with a class of '1' and THEN apply a class of 'end' to every nth item of THAT selection. – Dan Feb 22 '12 at 13:45
  • The numbers are right - totally get that. The issue is that in my example, 'C' doesn't have a class of '1' so it shouldn't (at least I don't want it to) count in the nth-child selection. I only want to include the articles which have a class of '1' in the initial selection, then do an nth-child filter on just those articles. – Dan Feb 22 '12 at 13:52