Some selectors target one specific element, others target an entire family. The star goes even further: it targets absolutely everything the page contains, with no distinction of tag, class, or attribute.
It is a rare tool in everyday styling, yet it shows up in the very first lines of nearly every stylesheet, especially in resets that bring browsers to a level playing field before a project's styling even begins.
Definition
The universal selector, written with the * symbol, targets every element in the document, regardless of its type. It can also be scoped inside a specific element, as in .card *, which targets everything found inside a card.
The classic use in a reset
The most common example is applying a uniform box-sizing across the whole page, so that internal spacing and borders never inflate an element's declared size.
/* common minimal reset at the top of a stylesheet */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}That rule gets written once, right at the top of the stylesheet, then forgotten: it guarantees predictable box-sizing behavior across the whole page, without having to think about it element by element.
The performance myth
A common belief still circulates: the universal selector is supposedly slow because it forces the browser to examine every element on the page. In reality, modern rendering engines evaluate a selector from right to left and optimize this exact case very efficiently. On a normal site, the performance difference between * and a more targeted selector is imperceptible, except on pages with tens of thousands of elements, which remains rare.
Where to use it, where to avoid it
The universal selector still makes perfect sense in a global reset or to target all direct children of a container, for example to apply uniform spacing. It becomes hard to control, however, as soon as it is used for precise visual styling, since it gives no hint about which elements are actually affected just by reading the rule.
box-sizing. For visual styling, a more explicit selector keeps the code easier to read six months later.Scoping the star to one container
The universal selector does not have to be global. Combined with a class selector, .grid > * targets only the direct children of a grid, which makes it possible for example to apply uniform spacing between cards without knowing their number or tag in advance. This is a common technique for building a flexible layout that accepts any content.
/* uniform gap between each direct child */
.grid > * + * {
margin-left: 16px;
}This last line combines the star with an adjacent sibling combinator: it adds a left margin to every element except the very first one, a common trick to space out a row of elements with no leftover margin on the edges. A similar use shows up in a CSS reset and normalize, where the star serves as a shared starting point before exceptions get adjusted case by case.
Frequently asked questions
No, not in any noticeable way on a typical site. Modern browsers handle this case efficiently, and the real performance cost almost always comes from somewhere else, such as poorly optimized animations.
* be written alone with nothing after it?Yes, * { } is perfectly valid and targets every element in the document, even though an empty style block obviously has no visible effect.
No, they need to be added explicitly, as in *, *::before, *::after, since pseudo-elements are not automatically included by the star alone.