Question

Given that I have a popup, with ID “popup” and in it two buttons, one on the left and one on the right side, with class “popupbutton”, which of these css rules is most efficient:

#popup a.popupbutton

#popup .popupbutton

a.popupbutton

.popupbutton

Answer 1

.popupbutton

The class will be quicker. But when you get down to it, you’re saving yourself something like 20-50ms (which may or may not matter).

There’s a pretty good test done you can read about here that looks at the difference in css selector speed across multiple browsers: http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

The average slowdown across all browsers is 50 ms, and if we look at the big ones (IE 6&7, FF3), the average delta is just 20 ms. For 70% or more of today’s users, improving these CSS selectors would only make a 20 ms improvement.

As you can see from the article, the difference of selector speed is pretty low and these tests were against pretty robust DOM examples.