Info Universal selector (*) usage
When the * selector is a reasonable reset tool versus a performance and specificity red flag.
The validator flags selectors that use * more than once, or use it combined with something else rather than alone.
Example
/* Common, fine: a box-sizing reset */
* { box-sizing: border-box; }
/* Flagged: universal selector combined with a descendant */
.container * { margin: 0; }Why it matters
A bare * selector by itself, used for something like a box-sizing reset, is a well-established and reasonable pattern — the validator does not flag that case. What it flags is the universal selector appearing more than once, or combined with a descendant combinator like .container *, which matches every single descendant element regardless of type or depth. That's expensive for the browser to match against a large DOM, and it makes the resulting styles hard to reason about since there's no way to tell from the selector alone which elements are actually affected.
Frequently asked questions
Is * { box-sizing: border-box; } bad practice?
No — that's a widely used, deliberate reset applied once at the top of a stylesheet, and it's not what this check is warning about. The concern is universal selectors combined with other selectors or used repeatedly, which cast a much wider and less predictable net.
What's a more targeted alternative to .container *?
Target the specific child elements or types you actually mean — a class on the elements that need the style, or a direct child combinator (.container > *) if you specifically mean immediate children rather than every descendant at any depth.