Skip to main content

Bug Tracker

Side navigation

#8542 closed bug (worksforme)

Opened March 16, 2011 01:34PM UTC

Closed March 30, 2011 05:38PM UTC

Last modified May 09, 2012 11:30PM UTC

nth-child in WebKit returns wrong count of elements

Reported by: patryk@patryk.net Owned by:
Priority: low Milestone: 1.next
Component: selector Version: 1.5.1
Keywords: Cc:
Blocked by: Blocking:
Description

I've got some strange issue.

I wanted to use :nth-child() to select 4 last children out of my selection: jsfiddle.net/vsRj3/3/

But it returns wrong count of elements, in this case 3, but on my production site an empty list. Strange enough, when I leave even number of selectors, it returns ok, but odd number, it returns nothing.

On the other hand, by using :eq() : jsfiddle.net/vsRj3/4/

works ok.

It seems there's a bug concerning :nth-child.

Checked on Chrome 10.0.648.134 and Safari 5.0.4

Thanks for help!

Attachments (0)
Change History (6)

Changed March 30, 2011 05:38PM UTC by rwaldron comment:1

component: unfiledselector
priority: undecidedlow
resolution: → worksforme
status: newclosed

Looks like it's producing the correct counts for me:

http://jsfiddle.net/rwaldron/nHDbT/1/

Changed March 30, 2011 11:26PM UTC by patryk@patryk.net comment:2

What version of Chrome did you check?

Changed October 30, 2011 07:37PM UTC by Ceriel Jacobs <cerieljacobs@gmail.com> comment:3

This :nth-child() with webkit browsers (Safari/Chrome) problem still exists. I spotted this when trying to hide lines of input fields in a form.

See http://jsfiddle.net/ZAJfh/

Row 1 is shown = ok = Firefox 7.0.1, Opera 11.52, Explorer 7

Row 1+3 are shown = not ok = Safari 5.1, Chrome 16.0.912.15

Workaround

Add a unique (dummy) class to each element where applying :nth-child() to.

The class needs to be unique for each element, an identical class doesn't work.

See http://jsfiddle.net/HVYe3/

This might be helpful for readers of http://api.jquery.com/nth-child-selector/

Changed October 30, 2011 08:10PM UTC by rwaldron comment:4

#10620 is a duplicate of this ticket.

Changed October 30, 2011 08:21PM UTC by dmethvin comment:5

This is most likely a bug in the implementation of querySelectorAll in Chrome, so it would be more appropriate to report it to them using a simple non-jQuery example. Given their development pace it would be inefficient/impractical for us to try and fix this with some sort of "look for the bug, scan every selector string, and avoid using querySelectorAll" approach.

These are likely to be related:

https://github.com/mootools/slick/issues/46

http://code.google.com/p/chromium/issues/detail?id=69400

Changed May 09, 2012 11:30PM UTC by anonymous comment:6

It seems to trigger when using multiple selectors. Single selector nth-child works fine.