CSS: #id .class VS .class performance. Which is better?

Question

I'd assume that this would be faster:

#dialog .videoContainer { width:100px; }

than:

.videoContainer { width:100px; }

Of course disregarding that .videoContainer in the first example would only be styled under the #dialog tag.

I think you have it backwards... I'm not sure though. If the `#dialog` is not necessary i would not use it — Drew Galbraith, Oct 02 '11 at 01:03
@Drew - I'm assuming that parsing id's is the fastest it would then only look under #dialog no? — Ryan, Oct 02 '11 at 01:05
Google has some good tips on writing selectors: http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors — Pat, Oct 02 '11 at 01:06

score 26 · Accepted Answer · edited May 23 '17 at 12:34

CSS selectors are matched from right to left.

Therefore, .videoContainer should be "faster" than #dialog .videoContainer because it misses out testing for #dialog.

However, this is all irrelevant at best - you'll never notice the difference. For normally sized pages, the amount of time we're talking about is so insignificant as to be nonexistent.

Here's a relevant answer by an expert that you should read: Why do browsers match CSS selectors from right to left?

CSS: #id .class VS .class performance. Which is better?

1 Answers1

Linked