In modern browsers, jQuery makes use of document.querySelectorAll() to boost performance when valid CSS selectors are used. It falls back to Sizzle if a browser doesn't support the selector or the document.querySelectorAll() method.

However, I'd like to always use Sizzle instead of the native implementation when debugging a custom selector. Namely, I'm trying to e up with an implementation of :nth-last-child(), one of the CSS3 selectors that are not supported by jQuery. Since this selector is natively supported by modern browsers, it works as described in the linked question. It is precisely this behavior that's interfering with debugging my custom selector, though, so I'd like to avoid it.

A cheap hack I can use is to drop in a non-standard jQuery selector extension, thereby "invalidating" the selector so to speak. For example, assuming every li:nth-last-child(2) is visible, I can simply drop that in, turning this:

$('li:nth-last-child(2)').css('color', 'red');

Into this:

$('li:nth-last-child(2):visible').css('color', 'red');

This causes it to always be evaluated by Sizzle. Except, this requires that I make an assumption of my page elements which may or may not be true. And I really don't like that. Not to mention, I dislike using non-standard selectors in general unless absolutely necessary.

Is there a way to skip the native document.querySelectorAll() method in browsers that support it and force jQuery to use Sizzle to evaluate a selector instead, that preferably doesn't employ the use of non-standard selectors? Likely, this entails calling another method instead of $(), but it's much better than a selector hack IMO.

In modern browsers, jQuery makes use of document.querySelectorAll() to boost performance when valid CSS selectors are used. It falls back to Sizzle if a browser doesn't support the selector or the document.querySelectorAll() method.

However, I'd like to always use Sizzle instead of the native implementation when debugging a custom selector. Namely, I'm trying to e up with an implementation of :nth-last-child(), one of the CSS3 selectors that are not supported by jQuery. Since this selector is natively supported by modern browsers, it works as described in the linked question. It is precisely this behavior that's interfering with debugging my custom selector, though, so I'd like to avoid it.

A cheap hack I can use is to drop in a non-standard jQuery selector extension, thereby "invalidating" the selector so to speak. For example, assuming every li:nth-last-child(2) is visible, I can simply drop that in, turning this:

$('li:nth-last-child(2)').css('color', 'red');

Into this:

$('li:nth-last-child(2):visible').css('color', 'red');

This causes it to always be evaluated by Sizzle. Except, this requires that I make an assumption of my page elements which may or may not be true. And I really don't like that. Not to mention, I dislike using non-standard selectors in general unless absolutely necessary.

Is there a way to skip the native document.querySelectorAll() method in browsers that support it and force jQuery to use Sizzle to evaluate a selector instead, that preferably doesn't employ the use of non-standard selectors? Likely, this entails calling another method instead of $(), but it's much better than a selector hack IMO.

• javascript
• jquery
• jquery-selectors
• sizzle

• If it's for debugging you could try overwriting or deleting the document.querySelectorAll() function perhaps. – jholloman Commented Jul 31, 2012 at 20:11
• +1 for attempting this. Awesome :) – Spudley Commented Jul 31, 2012 at 21:03
• I didn't try it: github./cowboy/jquery-misc/blob/master/… – thirtydot Commented Jul 31, 2012 at 21:59

3 Answers 3

You could just set it to null before jQuery loads so it thinks it's not supported:

document.querySelectorAll = null;
//load jquery, will trigger not supported branch
//Optionally restore QSA here (save a reference) if needed

This is supposed to make this evaluate to false

Demo: http://jsbin./asipil/2/edit

Comment out the null line and rerun, and you will see it will turn red.

Since you're developing the code for the selector yourself, could you not simply give it a custom name for the duration of the development cycle? Maybe give it your own vendor prefix or something? -bolt-nth-last-child()

That way, you'll know the browser definitely won't support it, so it should always fall into using Sizzle.

When you're done with the development cycle, you can drop the -bolt- prefix.

I know that's more of a work-around than an answer to the question, but it seems like the simplest solution to me.

It looks to be that jQuery.find defaults to sizzle. This will save you from destroying your environment by setting a native function to null.

https://github./jquery/jquery/blob/master/src/sizzle-jquery.js#L3

So you should be able to do the following and it will always go through sizzle.

$.find('li:nth-last-child(2)')