Disallow universal selector

Rule from css under compatibility category

What is a trooper!

we have submitted your edit to the community for review! We'll review and make it live on the site in the next few hours, the internet thanks you :).

Browse another section of the knowledge base



Suggest an edit

Cancel

This rule has no content... yet.

Add content to this rule

Or just browse to view rules that have content



 

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. For example, this type of rule should be avoided:

/* BAD */
.mybox * {
    background: #fff;
    color: #000;
    background: rgba(255, 255, 255, 0.5);
}
/* GOOD */
.mybox {
    background: #fff;
    color: #000;
    background: rgba(255, 255, 255, 0.5);
}
.mybox p {
    color: inherit;
}

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, which is having an ancestor with the class of mybox. The more complex the selector containing *, the slower the evaluation becomes. For this reason, it's recommended to avoid using the universal selector as the key part of a selector.

How do I fix this ?

Do not use the universal selector (at the far right of a CSS rule, at least). Instead write more specific rules for sub-elements.

Resources

Browse another section of the knowledge base



Signup icon
Ready to see how well your site scores?

Passmarked works best when you have an account. It allows you to keep a dashboard with saved data of the sites you have run through the system, we’ll alert you about important updates and you get access to the Passmarked Slack forum.

Sign up to get started