CODEWITHSUNDEEP
cssperformancecss-selectors
buschtoens
buschtoens

Reputation: 8541

How slow is * really?

Everybody states, that the * { ... } selector is very slow. But how slow is it really?

I always try to avoid it, but sometimes it's very useful. For example: * + h1 { margin-top 1em; }

Upvotes: 3

Views: 219

Answers (1)

BoltClock
BoltClock

Reputation: 723598

To put it very simply: the universal selector * is only as slow as there are elements on your page.

Since right-to-left matching browsers take each element and match it against all candidate rules, every element will match * just fine. It by itself doesn't harm performance, but if you have many elements in your page or a very complex DOM, that's where it allegedly gets slow, but even then it doesn't visibly degrade browser performance.

Even something like * + h1, for example, is reasonable, since if you want to take matching performance into account, then a right-to-left matching browser will test that selector only on h1 elements first, before checking if there's any element occurring before them (which really doesn't take much effort as * is basically a guaranteed match).

You may also wish to check out this answer of mine to a similar question about * + * (that's two universal selectors!).

Upvotes: 6

Related Questions