CSS Universal Selector Target All Elements Easily

Universal Selector

The universal selector in CSS is denoted by an asterisk * and is used to select all elements on a webpage, regardless of their type, class, ID, or attributes.

It is commonly used for resetting default styles (like margin or padding) or applying global styles to every element.

Syntax:

* {
   /* CSS properties and values */
}

Key Point

Targets all elements on the page.

Has low specificity, so it can be overridden by more specific selectors.

Commonly used for resetting default browser styles (e.g., margin: 0, padding: 0).

Be cautious using it with performance-heavy styles as it impacts every DOM element.

Example: for reset previous styling using * selector

* {
  margin: 0;
  padding: 0;
  border: none;
}

This example resets the margin, padding and border for every element on the page.

Example: for styling using * selector

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      color: blue;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <h2>This is heading</h2>
  <p>This will be applied on every paragraph.</p>
  <p id="para1">Welcome to!</p>
  <p>Quipoin!</p>
</body>

</html>

Output:

Use Cases

Apply global resets for consistent spacing and borders.

Set a base font or color across all elements.

Often combined with CSS resets or Normalize.css libraries.

Tips

Avoid adding heavy styles (e.g., box-shadow, transition) to the universal selector.
Override it with class or ID selectors where needed.
Combine with box-sizing: border-box; for layout consistency:
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}