CSS Universal Selector: Complete Guide to Selecting All Elements with Asterisk (*)

The CSS universal selector, represented by an asterisk (*), is one of the most powerful yet often misunderstood selectors in CSS. It allows you to select and style every single element on a webpage simultaneously, making it an essential tool for global styling and CSS resets.

What is the CSS Universal Selector?

The universal selector (*) is a CSS selector that matches every HTML element in a document. When you use the asterisk symbol in your CSS, it applies the specified styles to all elements regardless of their type, class, or ID.

* {
  property: value;
}

Basic Universal Selector Examples

Example 1: Setting Universal Box-Sizing

One of the most common uses of the universal selector is setting box-sizing to border-box for all elements:

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

<div class="container">
  <h2>Header</h2>
  <p>This paragraph has consistent spacing.</p>
  <button>Button</button>
</div>

Example 2: Universal Font Family

Setting a consistent font family across all elements:

* {
  font-family: 'Arial', sans-serif;
  color: #333;
}

Interactive Universal Selector Demo

Try this interactive example to see how the universal selector affects all elements:

Advanced Universal Selector Techniques

Universal Selector with Pseudo-classes

You can combine the universal selector with pseudo-classes for more specific targeting:

*:hover {
  transition: all 0.3s ease;
}

*:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

Universal Selector in Child Combinators

Use the universal selector with combinators to select all children of specific elements:

.container > * {
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f0f8ff;
  border-radius: 4px;
}

Common Use Cases

1. CSS Reset

The universal selector is commonly used in CSS resets to normalize default browser styling:

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

2. Global Typography

Setting base typography properties for all elements:

* {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

3. Debugging Layout Issues

Temporarily add borders to all elements to visualize layout problems:

* {
  border: 1px solid red !important;
}

Performance Considerations

While the universal selector is powerful, it’s important to understand its performance implications:

Best Practices

Do’s:

• Use for CSS resets and global normalization
• Apply for consistent box-sizing across all elements
• Implement for debugging layout issues temporarily
• Combine with pseudo-classes for enhanced user experience

Don’ts:

• Avoid overusing for performance-critical applications
• Don’t use for styles that should be element-specific
• Avoid complex property values that might break layouts
• Don’t forget about inheritance – some properties cascade naturally

Browser Support

The universal selector has excellent browser support:

Alternative Approaches

Sometimes you might want to achieve similar results without the universal selector:

* {
  font-family: Arial, sans-serif;
}

html {
  font-family: Arial, sans-serif;
}

/* Font family will inherit to all elements */

Conclusion

The CSS universal selector is a powerful tool that, when used wisely, can significantly streamline your stylesheet and ensure consistent styling across your entire website. While it’s essential to be mindful of performance implications, the universal selector remains invaluable for CSS resets, global styling, and debugging purposes.

Remember to use it strategically, combining it with other selectors and CSS techniques to create maintainable, efficient stylesheets. Whether you’re normalizing browser defaults or implementing global design systems, the universal selector (*) is an indispensable part of your CSS toolkit.