37

Does the star selector in CSS affect page rendering performance?

Are there any caveats using it?

* {
  margin:0;
  padding:0;
}
Teun Zengerink
  • 4,277
  • 5
  • 30
  • 32
gpilotino
  • 13,055
  • 9
  • 48
  • 61
  • 2
    In what context have you heard that it is "harmful"? When used in certain ways, it can behave differently depending on the browser (consider `* html {}` for example). – Blixt Nov 11 '09 at 09:42
  • 1
    i'm asking this also because i see "standard de facto" css reset methods avoid using it. – gpilotino Nov 11 '09 at 10:42

4 Answers4

60

When it comes to performance, Steve Souders is the man:

Shameless quote from one of the reports:

The key to optimizing CSS selectors is to focus on the rightmost selector, also called the key selector (coincidence?). Here’s a much more expensive selector: A.class0007 * {}. Although this selector might look simpler, it’s more expensive for the browser to match. Because the browser moves right to left, it starts by checking all the elements that match the key selector, “*“. This means the browser must try to match this selector against all elements in the page.

[bold emphasis mine]

anddoutoi
  • 9,973
  • 4
  • 29
  • 28
  • 4
    I also quote "It’s clear that CSS selectors with a key selector that matches many elements can noticeably slow down web pages." interesting read, thank you. – gpilotino Nov 11 '09 at 10:46
  • 5
    I like this quote better "Based on these tests I have the following hypothesis: For most web sites, the possible performance gains from optimizing CSS selectors will be small, and are not worth the costs." – Jesse Hattabaugh Oct 18 '15 at 04:22
  • @arkanciscan this is idd very true. Optimizing CSS selectors are probably one of the best cases of premature optimization. – anddoutoi Oct 19 '15 at 07:38
  • 4
    Also, browser performance characteristics are very different now in 2018 vs. 2009. I wonder if the advice about `*` performance matters today - I wouldn't be surprised if browsers optimize enough to make it not matter – JKillian Jun 12 '18 at 23:23
17

For some properties using * can produce unexpected results.

* { color: blue }
li { color: red }

Now given <li><i>text</i></li>, the text will be blue!

  • 3
    Yes, but you might not *think of it*, when you set the properties for '*'. This is the more true with '*' and interface elements or elements you seldom use. – Boldewyn Nov 11 '09 at 10:15
  • 2
    @ApoY2K: just because it works as it should, doesn't mean it's expected. When you have a * selector it's easy to forget about it. And when you remember, you have to think about it **every time you add a new element** to check you're not applying styles you don't want. – DisgruntledGoat Nov 11 '09 at 10:40
  • 1
    @ApoY2k: sure, if you're perfect and never make mistakes, you never write code that works other than as you expect. Otherwise, it's reasonable to think that color is inherited from the parent, and that's how this text being other than red is unexpected. –  Nov 11 '09 at 10:50
  • How come it is unexpected? has blue color. So what's wrong? – Paul Denisevich Jul 23 '16 at 20:36
  • This is not an unexpected result, the star is explicit in saying all elements will be blue. If you inferred they may be red from a parent selectors properties then that is poor understanding of css – fungus1487 Dec 11 '20 at 19:41
7

One view is that it's not so much that the * is a performance problem, it's that good old favourite - there's an IE issue with it. It affects IE 5, 5.5 and 6 as well as Macintosh variants. Basically, there is something called the HTML star selector bug which applies as follows:

* html

This should be interpreted as no element match because html is root and cannot be a child element. IE interprets this as html.

* * body

Again, should match to no element because body cannot be a grandchild element - even though it is a child element of HTML. IE interprets this as * body.

* html body

This should match no element, but IE interprets this as html body.

The performance side is usually treated that applying * only means that the style applies to every element in a page. I rarely find that this is an issue in its own right - the point at which it would become an issue means that you've probably got way too much markup in there anyway. Similarly, as it applies to everything, it means you need to increase your code to cope with elements that shouldn't have that style. As with everything else, it's up to you to decide what the tradeoffs and balance should be.

Pete OHanlon
  • 9,086
  • 2
  • 29
  • 28
1

Since I'm using the exact same rule in every of my projects and none have serious perfomance issues, I'd say: No, not as far as I know.

F.P
  • 17,421
  • 34
  • 123
  • 189
  • One selector with an asterisk won't significantly affect the performance of a small project but it could become an issue when you have a large code base and dozens of selectors like this. – dragomirik Jun 30 '23 at 18:31