[nth-child(x) bug] nth-child does not correctly select an element with parent

Hello, I think I've found a bug or something within the CSS3 spec relating
to nth-child that is incorrect and doesn't make sense when put into
practical use. I've checked other browsers to make sure it's not a browser
bug and the same behaviour occurs in Chrome (latest), Firefox (latest) and
Internet Explorer (11).

The issue is that if you use for example:

..parent input:nth-child(1)

If inside the parent element is something like a label before the first
input element, then everything you have put within that CSS selector above
will not work.

This is because as far as nth-child is concerned, the first input is not
the first child of the parent. However we're not looking for anything other
than the first input child of the parent element.

I've created a demonstration in case I've not explained it very well. I
believe this current behaviour is incorrect and should be revised as it's
not literally doing what you're telling it to do.

http://codepen.io/anon/pen/epwNKv?editors=110

I've found that using :nth-of-type is a suitable work around for this issue
anyway.

Thanks, Daniel James

Received on Thursday, 26 November 2015 18:15:27 UTC