Selector Engines: Right to Left

By  on  

One lessor known fact about CSS selectors, querySelectorAll, and JavaScript-based selector engines is that they read your selectors from right to left.  This news hit me as illogical at first, as you'd think that the first element in a selector string like "#myElement a.something .else" would provide a base context, but no:  the ".else" is search for first.  After more thought, searching for the right-most selector piece makes sense, as you instead collect the ".else" elements first (instead of, theoretically, all the elements under "#myElement", then "a.something" elements, and so on) and then look up the chain for matches.  Essentially, you grab all the potential matches and then confirm by walking up the DOM tree, instead of grabbing the parent and look for matches on the way down.

I was recently looking at popular development site and found the following snippet:

jQuery("#subscribe-main li:nth-child(4)")....

This snippet found the desired elements in 1ms according to FireBug's console.  A millisecond is lightning fast, but if you slightly change the selector code, you get a faster result:

jQuery("li:nth-child(4)", "#subscribe-main");

// Could use this as well
// jQuery("#subscribe-main").find("li:nth-child(4)")....

The selection code above returns the same elements in 0ms.  A millisecond difference is negligible in one instance, but in a large application, these milliseconds will add up!

This post simply acts a a reminder that selector composition is important.  Here's a task for you:  go to the sites you've written the JavaScript selectors for and compare your selectors like I have above.  If you aren't familiar with basic selector time testing via the console, here's how you do it:

jQuery("#mySelector .more .stuff")...

The console doesn't do better than millisecond precision, but a different result at that precision gets you started in selector enhancement.  Happy selector revising!

Recent Features

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos


  1. false

    But the selectors engine made by the frameworks like mootools didn’t work like that so how do you explain that ?
    How do you make this working with mootools ?
    $$('#.classSearched #idContainer')
    because actually the normal way is : $$('#idContainer .classSearched')

    • Most select engines to do work RTL, but Moo’s current engine, Slick, does not. Slick2 will be RTL.

  2. false

    Ok nice, i’ve saw yesterday that Sizzle do RTL and just understand why your article was written with jQuery :)

  3. If this is about performance, there is a test on jsPerf: jQuery find versus context. Therefore, this would be the fastest combination of selectors: jQuery("#subscribe-main").find("li:nth-child(4)");

  4. If it is that easy (if there’s an expensive query on the right and a cheap one on the left make it work LTR) shouldn’t the engine do that optimization for you? It’s probably not always that easy to find out, though…

    • I’m not aware of browsers doing *any* optimization for you. You write crap HTML, JS, CSS — you suffer.

  5. Markus Staab

    You should mention that performance varies a lot across browsers

  6. I still don’t understand why they design Selector Engines RTL. We as human read LTR. So when we write jQuery("#subscribe-main li:nth-child(4)"), we would think that selecting the element by id, then drill down to its children would be faster (from left to right). But in reality we would have to write jQuery("li:nth-child(4)", "#subscribe-main") to achieve better performance that jQuery("#subscribe-main li:nth-child(4)") is supposed to give us in the first place! Am I missing something?

  7. Yep, providing the contextual argument would work as well.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!