Grow your CSS skills. Land your dream job.

:nth-child/nth-of-type bug

  • # March 16, 2013 at 4:05 pm

    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.

    # March 16, 2013 at 4:16 pm

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

    I’d have to double check though.

    # March 16, 2013 at 4:23 pm

    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.

    # March 16, 2013 at 4:27 pm

    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.

    # March 16, 2013 at 4:29 pm

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

    # March 16, 2013 at 5:12 pm

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

    # March 16, 2013 at 5:21 pm

    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.

    # March 16, 2013 at 5:32 pm

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

    # March 16, 2013 at 5:56 pm

    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.

    # March 16, 2013 at 6:12 pm

    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…

    # March 16, 2013 at 6:29 pm

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

    # March 16, 2013 at 7:29 pm

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

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".