Universal selector

Learn when to use the * selector.

Universal selector

The universal selector is written as * and matches every element on the page, whatever the tag. Writing * { margin: 0; } zeroes the margin of all elements.

The universal selector is powerful but risky: it touches everything. It is mostly used for narrow tasks like resetting default margins or setting box-sizing.

Common use: reset

The most common job for the universal selector is to reset the browser's default margins. Browsers give body, h1, p different margins; * { margin: 0; } flattens them all.

Likewise, applying box-sizing: border-box to every element makes sizing more predictable. These two small tweaks form the base of modern stylesheets.

Exercise Set universal box-sizing

Use the universal selector to set box-sizing: border-box on every element. The selector must be just the * sign.

Show example solution

/* add the universal reset */
* {
  box-sizing: border-box;
}

Test yourself

Which symbol writes the universal selector?
- *
- #
- .
- &
Show answer

* — Correct. The * sign is the universal selector and matches every element.

Write the universal selector

____ {
  box-sizing: border-box;
  margin: 0;
}

Show answer

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

Match each selector to its meaning

*

All elements
.card

Elements with class card
#header

The element with id header
p

All paragraphs

Next lesson: Grouping and comma

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies