Why `nth-of-type` behaves differently in different browser versions?

Question

Problem:

So I've run into a peculiar difference in behavior of :nth-of-type selector when applied to an element with tag type not being specified in selector.

Take the following HTML:

<div class="parent-class">
    <header>...</header>
    <div class="child-class">...</div>
    <div class="child-class">...</div>
</div>

Now, this selector

.parent-class .child-class:nth-of-type(1)

should probably point to the first child div element, which it does in Chrome 59 and Firefox 54, but does not in Mink-drived Selenium browsers (Chrome 53 from selenium/hub:3.0.1-fermium and Firefox 50 from selenium/node-firefox-debug:2.53.0).

What nth-of-type does in those browsers is ignoring element types altogether - meaning, for selector to work one has to specify either:

.parent-class .child-class:nth-of-type(2)

or

.parent-class div.child-class:nth-of-type(1)

Question:

Why does the element type gets ignored in case of Selenium browsers?

Answer 1

It is a limitation of Symfony's CssSelector component which is used by Mink

Mink uses CssSelector to translate elements to xpath which is interpretable by the driver.

And this tool simply does not fully support several types of CSS selectors, which is actually stated in the official documentation:

Several pseudo-classes are not yet supported:

*:first-of-type, *:last-of-type, *:nth-of-type, *:nth-last-of-type, *:only-of-type. (These work with an element name (e.g. li:first-of-type) but not with *.

Answer 2

Selenium is not known to have issues with :nth-of-type(). Perhaps it's a bug with Mink, since that behavior is clearly incorrect — :nth-of-type() should not require a type selector to work, as stated in my answer here.