The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS nth-of-type ignores classes

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #35642

    This is driving me wild. Check the code below:

    I want to select the every odd instance of the ‘foo’ class. But will just select the odd instance of a.

    It targets the third ‘a’ element as being the first of the ‘foo’ class that happens to be odd. I want to target the first as its an odd instance of its class.

    Is there a way to target this or am i just being a fool?

    Any help would be much appreciated!


    Glad someone else agrees. Seems like madness. I would have expected a:nth-of-type(odd).foo to present that behaviour.

    What jquery would you use? It seems to have an .eq() function but I think it works in exactly the same way.


    @hellowmrtaylor: In jQuery, you could just run the following:

    function selectOddFoo() {
    $('.foo:odd').each(function() {

    // do something here



    So thanks to a colleague of mine, M. PL, here’s the jQuery that you’ll need to select the odd .foo anchors.

    Chris Coyier

    It’s weird but I’m pretty sure this is the standard expected behavior. :nth-of-type doesn’t care about class, it cares about type.

    So when this selector is evaluated, it first evaluates the :nth-of-type rule (it’s the right-most) and determines it’s looking for elements with type “a”. Then it finds the odd ones. Then if the odd one has a class of “foo”, it matches. So it’s still operating from it’s original match on all “a”, not “a”‘s limited to .foo.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.