Universal Selector (*)

The universal selector (*) matches all elements. It's useful for global resets and applying styles to every element. However, be careful with performance on large stylesheets.

Universal Selector Basics

CSS

/* Select all elements */
* {
  margin: 0;
  padding: 0;
}

/* Universal selector with specificity */
div * {
  color: red;
  /* All elements inside div */
}

/* Scoped universal selector */
.container * {
  box-sizing: border-box;
  /* All elements inside container */
}

Common Use Cases

CSS

/* Global CSS reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Clearfix all elements */
*::before,
*::after {
  box-sizing: inherit;
}

/* Debug borders (see all elements) */
* {
  border: 1px solid red;
}

/* Reset inside specific container */
.modal * {
  margin: 0;
  padding: 0;
}

Warning

While * is useful for resets, avoid using it in production for performance. Apply styles to specific selectors when possible.

Note

The universal selector (*) matches all elements. It's useful for global resets but should be used sparingly in production for performance.

Attribute selectors: [Attribute Selectors](/css/attribute-selectors).