:nth-child/nth-of-type bug

[micjamking]

My goal is to only select every other element in a list that has a specific class. However, I’m finding that if there are elements in the list which do not contain the class, it seems to throw the selection off. This happens regardless of whether I use :nth-child of :nth-of-type.

Here is a code example of what I’m experiencing:

[http://codepen.io/micjamking/pen/mpvis](http://codepen.io/micjamking/pen/mpvis “CodePen: :nth-child/:nth-of-type bug”)

Ideally, the 2nd, 4th, … list item with a class of .diff should be selected, but it seems to be looking at the element instead of the class to determine the selection.

Appreciate any advice/help with this.

[Paulie_D]

I don’t think nth-of-type works with classes…only elements.

I’d have to double check though.

[micjamking]

I’m pretty sure :nth-child & :nth-of-type will work on any valid selector, ie. elements or classes.

[http://www.w3.org/wiki/CSS3/Selectors/pseudo-classes/:nth-child](http://www.w3.org/wiki/CSS3/Selectors/pseudo-classes/:nth-child “W3C: :nth-child”)

[http://www.w3.org/wiki/CSS3/Selectors/pseudo-classes/:nth-of-type](http://www.w3.org/wiki/CSS3/Selectors/pseudo-classes/:nth-of-type “W3C: :nth-of-type”)

It seems to be working in the code example, albeit incorrectly.

[Paulie_D]

I think you are mis-reading.

A class is not an element…it is something applied to an element.

So, you can select elements only…not elements **by class**.

At least AFAIK.

[micjamking]

Hmmm… well that does seem to be the case. Thanks for helping me understand that.

[TheDoc]

This works fine for me: http://codepen.io/anon/pen/jdtuy

nth-child won’t work in your first example because there was a list item without a class that comes first. I’m pretty sure that’s what will cause it to be thrown off.

nth-of-type will work better in your example, but has smaller browser support (IE).

[micjamking]

Right, but my problem is that the list item is there and needs to be there. There will be elements in the list that simply don’t have the class (the class is being applied dynamically via javascript), but I need every other element that does have a class to be styled a certain way.

I think Paulie D is correct now, :nth-child/:nth-of-type is only applied to elements, not classes.

[CrocoDillon]

If you add the class with JS you might as well throw in something that targets every other element that gets that class.

[Senff]

I think you probably need some JS/jQuery that goes through all elements with the class “diff”, and assigns a new class for every other one. I can’t think of any simpler way really:

http://codepen.io/senff/pen/rEegL

If I understand correctly, you want every other item with that has class “div” to be styled. in this case, that would be 0-2-6-9.

[micjamking]

So I definitely could write more JavaScript for selecting every other element. However, I think this may be a legitimate CSS bug; if you notice in my code example, when I add another list item without the class .diff, the originally expected behavior kicks in.

So it seems that :nth-of-type can apply to classes, but exhibits inconsistent behavior when doing so…

[CrocoDillon]

@Senff, since you have the index of the element in the set, you don’t need the `oddeven` variable :)

if (index%2==0)
$(this).addClass(‘selected’);

@micjamking, not a bug, the spec is talking about:

> an element that has an+b siblings before it in the document tree

and

> an element that has an+b siblings with the same expanded element name before it in the document tree

It doesn’t say anything about the classes on those siblings. `.diff:nth-child(even)`, you can read that as ‘every even child, that also has class diff’.

[micjamking]

@CrocoDillion: Ahhh, you are correct! That hurt my brain a bit trying to get my head wrapped around the definition, but your explanation cleared it up for me.

I was able to solve the issue using JavaScript, with the condition above (using the modulus operator). Thanks everyone for helping me understand this one.

[Author]

Posts