Take the 2-minute tour ×

is it more efficient to use $('.active') or $('div.active') ? I have always avoided including "div" because it's extra text in the javascript file I don't want the user to have to download.

share|improve this question
They mean different things. –  BoltClock Jan 17 '11 at 19:33
@BoltClock: I think OP means when all the possible elements that may have active are all <div> elements, should div be included in the selector. –  user113716 Jan 17 '11 at 19:37
@patrick - yes, that's what I mean, thanks for clarifying –  Webnet Jan 17 '11 at 20:28
add comment

5 Answers

up vote 8 down vote accepted

Older versions of IE will benefit from the inclusion of div because they don't support getElementsByClassName().

Because of that, every element on the page needs to be selected with:


...and manually tested to see if it has the active class.

If you include div, then it is able to narrow it down a bit, since it can do:


...then test only those elements.

When I say older versions, I mean IE6 and IE7 since IE8+ supports querySelectorAll.


Browser suppport:

share|improve this answer
On the other hand, you reduce your efficiency by selecting with the tag name if you do it by id. e.g. $('#my_id') is more efficient than $('div#my_id'). The reason is pretty much the same - except that even browsers as antiquated as IE6 have getElementById(). –  Kyle Humfeld Jan 17 '11 at 19:40
@Kyle: Good point. The tag name shouldn't be included with an id-selector –  user113716 Jan 17 '11 at 19:41
add comment

It depends. If you mean performance. I prepared special test for everyone on JSPerf: jquery class selector test. On my browser and computer (FF 3.6.13 and Core 2 Duo 1.6) div.active is a bit slower. But found it variable - it seems GC has something doing here.

And after few more tests it seems that div.active:

  • Speed is variable on FF, sometimes GC turns on 'div.active' test, but generally difference is very small.
  • Unnoticable difference on Chrome and Safari
  • Faster on IE9
share|improve this answer
When I ran the test a few times div.active was almost always a little faster, though each time the difference was negligible. –  user113716 Jan 17 '11 at 20:06
A what browser do you use? –  gertas Jan 17 '11 at 20:07
I used the same version of FF that you did. I also tested in Safari. (I tried in Chrome, but the javascript fails for some reason.) When the results are that close, you really need to run the test several times to get a more balanced result. –  user113716 Jan 17 '11 at 20:14
add comment

I like to include the tag name if it helps self-document the code. If I can use


instead of

// this is the primary nav

I tend to do it.

share|improve this answer
If the time difference is negligible, then I think this approach is very sound. Naturally, if you were to change your code later on, you'd have to change it in two places, but that downside is worth the upside IMO. –  Kyle Humfeld Jan 17 '11 at 20:23
add comment

I guess the best way to get some speed on large pages is to use find instead.

$( your-container ).find("div.active")

Since you always? know where you should look, you can create your own scope. So that the browser only need to search within that area of code.

By the way, you don't need to care about size of the css, EVER :) Use css minifing tools to minimize the css when the site is in production mode. You can also set your web server to automatically gzip your css files before sending the to the user. And if you don't change your css filename on every pageload, the browser cache up to whole css file.

share|improve this answer
add comment

CSS selectors in jQuery used to be optimized similar to how you would do it for browsers, see: http://css-tricks.com/efficiently-rendering-css/

Specifying a generic tag anywhere, even with an ID or class would be dramatically slower than just specifying the ID or class alone. See:


The above uses jQuery 1.3. Since jQuery 1.4 and the introduction of the Sizzling selector engine, this is less important from what I understand. See:


For myself, I decided in CSS to use whatever reads the easiest, and I am more specific there since that is only parsed once. In jQuery, however, I have been more careful since those selectors could run thousands of times over the life of a page.

share|improve this answer
add comment

Your Answer


