CSS Selectors
CSS Universal Selector
Use the universal selector deliberately for box-sizing resets, scoped defaults, and namespace-aware matching without applying unnecessary rules everywhere.
The CSS Universal Selector is used to select all elements on a webpage.
It is represented by an asterisk (*) and applies styles to every HTML element, unless overridden by more specific selectors.
This selector is often used for:
- Resetting default browser styles
- Applying global styling
Syntax for Global Selector
css
* {
property: value;
}Example of Global Selector
css
* {
margin: 0;
padding: 0;
}👉 This removes default spacing from all elements.
Attributes
| Property | Description | Example |
|---|---|---|
| margin | Controls outer spacing | margin: 0; |
| padding | Controls inner spacing | padding: 0; |
| box-sizing | Defines box model calculation | box-sizing: border-box; |
| font-family | Sets font for all elements | font-family: Arial; |
| color | Sets default text color | color: black; |
Scope broad matches
The universal selector has zero type specificity, but it can still match a large number of elements. A scoped reset such as .component, .component *, .component *::before, .component *::after is often safer than changing every node on the page. Remember that * matches elements, not pseudo-elements, so pseudo-elements must be listed explicitly when they need the same box-sizing rule. The supporting concepts are explained in Box Sizing and CSS Specificity.
Example
Global Selector Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Universal Selector</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
color: blue;
}
p {
color: green;
padding: 10px;
}
</style>
</head>
<body>
<h1>Universal Selector Example</h1>
<p>This paragraph has no default margin.</p>
<p>Spacing is controlled using CSS.</p>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| Universal selector | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
- The universal selector targets every element
- Useful for creating a CSS reset
- Can impact performance if overused in large projects
- Often combined with other selectors for better control
- Lower specificity compared to class and ID selectors
Conclusion
The CSS Universal Selector is a powerful tool for applying global styles across a webpage. It is especially useful for resetting default browser styles and ensuring consistent layout behavior.