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.

Answer 1

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?