Universal Selector

The universal selector is the wildcard of CSS. It matches every single element on the page.

You write it as a single asterisk *.

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

This is one of the most common uses of the universal selector — a CSS reset. Browsers have their own default margins and paddings on elements, and they vary between browsers. By setting everything to zero first, you get a clean slate and consistent starting point.

Using the Universal Selector Wisely

The universal selector is powerful, but use it carefully. Applying styles to everything can cause performance issues on large pages if you do something complex like adding shadows or animations to every element.

It is also common to see it used for setting a global font or box-sizing, but for most other cases, being more specific with element or class selectors is better.

/* Reset margins and padding on everything */
* {
  margin: 0;
  padding: 0;
}

/* Apply a global font */
* {
  font-family: Arial, sans-serif;
}