CSS Universal Selector

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.