Is the CSS star selector considered harmful (and w

Question

Does the star selector in CSS affect page rendering performance?

Are there any caveats using it?

* {
  margin:0;
  padding:0;
}

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

Answer 2

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

• Performance Impact of CSS Selectors
• Simplifying CSS Selectors

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]

Answer 3

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.

Answer 4

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!