nth-of-type ignores classes

[hellomrtaylor]

This is driving me wild. Check the code below:

I want to select the every odd instance of the ‘foo’ class. But a.foo:nth-of-type(odd) 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 a.foo 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!

[hellomrtaylor]

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.

[Miker]

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

function selectOddFoo() {

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



//	 do something here



});

}

[Miker]

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

http://jsfiddle.net/Microchet/Mr46C/4/

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

a.foo:nth-of-type(odd)

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.

[Author]

Posts