What Is the Performance Impact of the Universal Selector

What is the performance impact of the universal selector?

In modern browsers the performance impact is negligible, provided you don’t apply slow-effects to every element (eg. box-shadow, z-axis rotation). The myth that the universal-selector is slow is a hangover from ten years ago when it was slow.

Reference: http://www.kendoui.com/blogs/teamblog/posts/12-09-28/css_tip_star_selector_not_that_bad.aspx

Does * selector affect performance seriously?

This is a very un-performant selector, but actually the performance impact is negligible. That is, of course without using properties like box shadows, animation on the universal selector. That will actually slow down the site as well.

So, if you know what you're doing, you can use the universal selector, but if you like to optimize your site performance best as possible, I would recommend you to avoid using it.

What is the practical performance impact of the * css selector?

Read this article.

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.

Why are selectors such as a[title= home ] slower than using class?

Browser implementors optimize the most common cases. Since classes are used very frequently to match styles, they must implement this as efficiently as they can. When they load in CSS, they index the classes to make this possible.

Since random selectors like title="home" are not used very frequently, they can get away with implementing them using simpler searches. It won't have as much impact on performance, because it will rarely be used.

Classes also require special treatment in the browser, because an element may have multiple classes, e.g. class="foo bar baz". When parsing the document, the browser needs to split this up so that it can match any of them against CSS selectors.

Universal selector instead of comma separated elements

No; at worst you'll just get yelled at by people who still subscribe to the "avoid the universal selector" dogma. If you're still worried, because your pages are extremely complex with elements in the order of thousands, then you can choose not to use it, but you'll just have to make do with the expanded selector-list because there isn't any cross-browser alternative available.

Difference between universal and descending selector in CSS

The general rule is to use the universal selector very sparsely due to its bad impact on performance. You basically almost never use it.

The descendant selector, as the name suggests, targets descendants of the element preceding the descendant selector.

Please note that both selectors you show are not exactly the same.

It helps alot to read selector from right to left:

div * .test targets

items that have a css class test (.test)
which are descendants
of any element *
which is a descendant
of a div element.

See this example:

div * .test{
   color: red;
}

<div>
  <div class="test">test</div>
</div>

Universal selector * and pseudo elements

No, the universal selector * does not affect pseudo-elements (except indirectly via inheritance, as pseudo-elements are typically generated as children of actual elements).

The universal selector, like other named element selectors such as p and div, is a simple selector:

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

A simple selector, and by extension any complex selector, targets only actual elements.

Although pseudo-elements (which are not the same thing as pseudo-classes mentioned above) can appear in selector notation alongside simple selectors, pseudo-elements are completely separate from simple selectors as they represent abstractions of the DOM that are separate from actual elements, and therefore both represent different things. You cannot match a pseudo-element using a simple selector, nor can you apply styles to an actual element in a CSS rule with a pseudo-element in its selector.

So, in order to match :before and :after pseudo-elements of any element, yes, one will need to include *:before, *:after in the selector. Having just * { box-sizing: border-box; } will not affect them since box-sizing is not normally inherited, and as a result, they will retain the default box-sizing: content-box.

One possible reason why you might never have had any issues with pseudo-elements is that they're displayed inline by default, as box-sizing has no effect on inline elements whatsoever.

Some notes:

As with any other chain of simple selectors, if * is not the only component then you can leave it out, which means *, :before, :after is equivalent to *, *:before, *:after. That being said, the * is usually included for the sake of clarity — most authors are used to leaving the * out when writing ID and class selectors, but not pseudo-classes and pseudo-elements, so the notation may seem strange and even wrong to them (when it is in fact perfectly valid).
The current Selectors specification that I link to above represents pseudo-elements with double colons. This is a new notation introduced in the current spec to distinguish pseudo-elements from pseudo-classes, but most box-sizing resets use the single colon notation to accommodate IE8, which supports box-sizing but not the double colon notation.
Although *:before, *:after applies styles to the respective pseudo-elements of any element, which includes html, head and body, the pseudo-elements will not actually be generated until you apply the content property. You do not have to worry about any performance issues as there are none. For a detailed explanation, see my answer to this related question.

Resetting CSS box-sizing: universal selector vs .box class

The universal selector is the most expensive selector you can use in terms of performance.

Benchmarks here: http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/

But that said, it depends what you mean by "performance". If your site is noticeably slow, there are likely other reasons than your stylesheets, unless they're really badly written.

What Is the Performance Impact of the Universal Selector