Previous
Written by: rJTutorial Team | Last Updated:

CSS Universal Selector

The universal selector in CSS is represented by an asterisk (*). It is a powerful "wildcard" selector that matches every single element on a web page, from the root <html> tag down to the deepest nested paragraph or span.

Because it targets everything, it is typically used to apply global styles or to perform a "CSS Reset" to ensure a consistent look across different web browsers.

Basic Usage Example:

/* Selects every element on the page */
* {
  text-align: center;
  color: blue;
}

In this example, every piece of text, every heading, and every container on your site will inherit center alignment and a blue text color. While this is great for demonstration, applying such broad styles in a production environment is rare because it removes the unique styling of specific elements like headers or buttons.

Developer Tip: Use the universal selector during debugging! If you are struggling with a layout issue, try adding * { outline: 1px solid red; }. This will draw a box around every element on the page, helping you instantly see where margins, padding, or alignment issues are happening.

The Most Common Real-World Use Case

In modern web development, the universal selector is most frequently used to set box-sizing. By default, adding padding or borders to an element increases its physical width. Most developers prefer the border-box model, where padding and borders are included inside the defined width.

/* The industry standard "Reset" */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
Best Practice: Always include *::before and *::after when using the universal selector for box-sizing. This ensures that pseudo-elements also behave predictably within your layout.

Understanding Specificity

One of the most important things to remember is that the universal selector has a specificity of 0 (0,0,0,0). This means that any other selector—whether it's a class (.button), an ID (#header), or even a basic element selector (p)—will override the styles defined in the universal selector.

Common Mistake: Beginners often try to use the universal selector to force styles, only to find they aren't working. Because its specificity is zero, even the simplest tag selector like h1 { color: red; } will override * { color: blue; }.

Scoped Universal Selector

You don't always have to use the asterisk on its own. You can "scope" it to apply to all children within a specific parent element. This is useful when you want to apply a rule to everything inside a specific section without affecting the rest of the page.

/* Selects all elements inside the .container class */
.container * {
  border: 1px solid #ccc;
}
Watch Out: Using the universal selector too aggressively (like .main-nav * * *) can cause performance issues on very large, complex DOM trees because the browser has to check every single element. Use scoped universal selectors sparingly.
Previous