CSS Universal Selector (*) — Selecting All Elements

CSS Universal Selector

The universal selector * matches every element in the document, regardless of type, class, or ID. It has zero specificity contribution, making it useful for broad baseline styles.

Syntax

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Specificity

The universal selector has a specificity of (0, 0, 0). It contributes nothing to specificity calculations, which means any other selector will override it.

Common Use Cases

CSS Reset / Normalize:

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Debugging layout issues:

* {
  outline: 1px solid red;
}

Scoped reset within a component:

.widget * {
  font-family: inherit;
  font-size: inherit;
}

Performance Myth

A common misconception is that * is slow. Modern browsers handle it efficiently in most contexts. However, avoid deeply nested universal selectors like .parent * * * span as the browser must check many ancestors during right-to-left matching.

With Namespaces

In XML/SVG contexts, you can use *|* to match elements in any namespace, or ns|* for a specific namespace.