Low This Hint is of the lowest significance, and should only be addressed if there are not more serious issues which have not been handled. Issue This Hint represents an error or problem that needs to be fixed.

CSS contains universal selector

This means that the URL in question is a CSS file that contains one or more universal selectors.

Why is this important?

The universal selector (*) matches all elements. Though convenient for selecting a group of elements at a time, the universal selector causes performance issues when used as the key part (far-right) of a selector. Browsers evaluate selectors from right-to-left, so this rule begins by first matching every element in the document. After that, each of those elements must be inspected to see if it matches the next criteria, and so on. The more complex the selector containing *, the slower the evaluation becomes.

What does the Hint check?

This Hint will trigger for any internal or external CSS URL which contains a universal selector as the key part of a selector.

Examples that trigger this Hint:

The Hint would trigger for any style sheet that contains universal selector as the key part (furthest right):

* {
color: red;

.selected * {
color: red;

How do you resolve this issue?

It is recommended to avoid using the universal selector as the key part of a selector - using the universal selector when it is not key does not introduce such performance issues.

Further Reading

Ready to try Sitebulb?
Start your free 14 day trial now

Start Free Trial