Documentation: Behavior of :nth-of-type when combined with another selector

[blelem]

It seems to be a rather common pitfall to use :nth-of-type and :nth-child together with a class selector.

tr.row:nth-child(odd)

I see it would be useful that the documentation of :nth-of-type and :nth-child would explicitly warn that this construct won't probably do what a developer not that familiar with selectors would expect.

Note! When combining selectors, there is no notion of order among simple selectors, the following two compound selectors are equivalent:

table.myClass tr.row:nth-child(odd)
table.myClass tr:nth-child(odd).row

They both mean select any tr element that matches all of the following independent conditions:

it is an odd-numbered child of its parent;
it has the class "row"; and
it is a descendant of a table element that has the class "myClass".

This is mainly cut&pasted from : http://stackoverflow.com/questions/5545649/can-i-combine-nth-child-or-nth-of-type-with-another-selector

[gnarf]

It's probably worth adding a note about this. https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child doesn't have a note about it either - might be worth adding one.

Also note that the examples on https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type are worse at describing :nth-of-type than the :nth-child page is :)

[blelem]

While we're at it, the selectors introduced in jQuery 1.9 nth-last-child() and nth-last-of-type() should also be covered.