Fastest CSS selector?

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

Idk if you need to be that concerned about speed with css, how many of these are you styling? — Mikey G, Feb 09 '12 at 19:15
Is this being downvoted because people think it is irrelevant? Optimizing CSS selectors is almost certainly a waste of time, but a question can be interesting per se. — jds, Oct 31 '14 at 15:07

score 5 · Accepted Answer · answered Feb 09 '12 at 19:24

.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.

Agreed! The efficiency of CSS selectors will only matter *at all* when selecting large sets of elements. Consider it a micro-enhancement, and don't worry about it. — Ryan Kinal, Feb 09 '12 at 19:27

I.G. Pascual · Answer 2 · 2012-02-09T19:21:02.167

2

.popupbutton is the fastest selector, check google PageSpeed tips on CSS rendering

edited Feb 09 '12 at 19:21

answered Feb 09 '12 at 19:15

I.G. Pascual

5,818
5
42
58

Perhaps not for the reason you might think, though. This comes entirely from the fact that selectors are applied right-to-left. – Ryan Kinal Feb 09 '12 at 19:17
That's it, which happens in most cases, heres a more detailed answer... http://stackoverflow.com/questions/5797014/css-selectors-parsed-right-to-left-why – I.G. Pascual Feb 09 '12 at 19:26

score 1 · Answer 3 · answered Feb 09 '12 at 19:29

.popupbutton is the fastest.
But keep in mind that a.popupbutton is not the same as .popupbutton. They will do the same thing most of the time but consider this exception:

a:link { color: red; }
.popupbutton { color: green; } /* Won't work */
a.popupbutton { color: green; } /* Will work */

Fastest CSS selector?

3 Answers3