CSS Universal Selector

ADVERTISEMENT

The universal selector is written as * and it matches every element on the page.

It’s commonly used for:

  • Global resets
  • Applying base styles
  • Debugging layout issues

✅ Syntax

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

This example resets the default spacing and sets a consistent box model across all elements.

🛠 Use Cases

1. Global Reset

* {
  margin: 0;
  padding: 0;
}

Removes browser default spacing.

2. Applying Common Base Style

* {
  font-family: 'Arial', sans-serif;
}

Useful to apply consistent typography.

3. Scoped Use (With Combinators)

header * {
  color: white;
}

Targets all elements inside the <header> only.

⚠️ Performance Note

While * is powerful, be cautious:

  • On large pages, it can impact performance.
  • Avoid overusing it with expensive properties (like animations).

👍 Best Practices

  • Use it once, in a reset or base style block.
  • Prefer using scoped selectors (div *, section *) if needed inside components.
  • Pair with box-sizing: border-box for layout consistency.

ADVERTISEMENT