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 the follwing 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.

Noncompliant Code Example

.mybox * {
  background: #fff;
  color: #000;
  background: rgba(255, 255, 255, 0.5);
}

* {
  color: red;
}

Compliant Solution

.selected * a {
  color: red;
}

stylelint Related Rules