Question

I have the following HTML:

<div class="foo">
    <div class="bar">
        <div class="target">
        </div>
    </div>
</div>

Which selector is more efficient?

• $('.foo > .bar > .target')
• $('.foo .bar .target')
• $('.target')

Did I order them correctly? 🙂

Answer 1

Be careful not to get too caught up in these types of issues – micro-optimization can really ruin a project. Not that it isn’t good to ponder from time to time, but sincerely, be cautious.

If you still would like to know which of those three are faster, you can setup a quick performance test via http://jsperf.com and give them all three a run against that markup. Fortunately for you, I’ve saved you the hassle and setup the test myself 😉 http://jsperf.com/css-selector-specificity

Results:

                              Ops/Sec
----------------------------+---------+--------+------------
$('.foo > .bar > .target'); |  78,379 | ±6.54% | 65% slower
$('.foo .bar .target');     |  78,499 | ±7.72% | 66% slower
$('.target');               | 213,488 | ±0.39% | fastest

As you can see, the simplest of the three was much faster. Your results will vary from browser to browser. For instance, the above is from Chrome version 23. When I ran this test in Internet Explorer 10, it was even faster, with over 216,000 operations a second.