References

Beginner-friendly references for web development, with live, editable examples.

The CSS * selector

Selector CSS All modern browsers Updated
Quick answer

The CSS universal selector, *, matches every element on the page. Its most common use is the box-sizing reset — *, *::before, *::after { box-sizing: border-box; } — applied once at the top of a stylesheet. Because it matches everything, use it deliberately rather than for broad styling.

Overview

The universal selector, written as a single asterisk *, matches every element — every <div>, <p>, <span>, all of them. On its own that sounds blunt, and it is, which is why it has one classic, near-universal use rather than many.

That use is the box-sizing reset: *, *::before, *::after { box-sizing: border-box; } at the very top of a stylesheet, which makes every element's sizing behave predictably. It is also occasionally handy scoped inside another selector — .prose > * targets all direct children of an element — where it is precise rather than page-wide.

It has the lowest possible specificity (0,0,0), so it never gets in the way of more specific rules. Just avoid hanging expensive properties off a bare * across a large page; reset what you must, and prefer targeted selectors for the rest.

Syntax

/* the classic box-sizing reset */
*, *::before, *::after {
  box-sizing: border-box;
}

/* scoped: all direct children */
.prose > * {
  margin-block: 0.5em;
}

Example

Live example 
<style>
  .demo * { outline: 1px dashed #1c7ce9; padding: 4px; font: 14px system-ui, sans-serif; }
</style>
<div class="demo">
  <p>Every <span>element</span> here gets an outline.</p>
</div>

Best practices

  • Use it for the box-sizing reset and little else at the page level.
  • Scope it under a parent (.prose > *) when you genuinely want to target a group of children.
  • Avoid attaching costly or far-reaching styles to a bare * across large pages.
  • Its specificity is zero, so it never overrides more specific rules — handy for safe defaults.

Frequently asked questions

What does the * selector do in CSS?
It matches every element on the page. It is most often used for the box-sizing reset applied to all elements.
What is the universal selector used for?
Chiefly the reset *, *::before, *::after { box-sizing: border-box; }, and occasionally, scoped under a parent, to target all of an element's children.
Is the universal selector bad for performance?
On modern browsers a simple * reset is fine. Just avoid attaching heavy styles to it across very large pages, and prefer targeted selectors for general styling.
What is the specificity of the universal selector?
Zero (0,0,0) — the lowest possible — so it never overrides element, class or ID selectors.
:root