Home CSS Selectors * CSS Universal Selector (*) Definition
Definition and Usage The universal selector (*) matches elements of any type . Alone it styles every element on the page; scoped like .card * it styles every descendant inside that parent.
It is often used for light resets (margins, box-sizing). Prefer typed or class selectors for day-to-day component styles.
Baseline · Widely available. Not deprecated. Part of CSS from the start; Baseline dating cites July 2015 for the modern web platform set.
Asterisk is often optional. *.note and .note match the same elements. Write the shorter form unless a namespace needs an explicit *.
Syntax
CSS Syntax Namespace forms also exist (*|*, ns|*, |*) when mixing HTML with SVG or MathML.
Patterns
Common Patterns Pattern Matches Try it *Every element in the document .box *Every descendant inside .box * { box-sizing: border-box; }Border-box sizing on all elements .floating + *Next sibling after a floating element
Approach
How to Use the Universal Selector Reach every element — or every element under a parent — with one rule.
Write * { … } for a global rule (resets, base font color). Scope with a parent: .card * limits the match. Remember specificity is 0 — classes and types override it easily. For pseudo-elements, combine explicitly: *::before. Try it
Live Preview Toggle a scoped .demo * style. Watch every nested tag change together.
Code
CSS Examples Each snippet focuses on *. Use Try It Yourself for a live editor.
1. Style all elements 2. Scoped .box * 3. Border-box reset Example 1 — Style All Elements A bare * paints every element the same color.
<style>
* {
color: #15803d;
}
</style>
<h1>Heading</h1>
<p>Paragraph</p>
<a href="#">Link</a> How It Works Match all. * selects every element type.Shared color. Heading, paragraph, and link all turn green.Low power. A later a { color: blue; } would override the link.Use sparingly. Great for demos and base resets, not every component.Example 2 — Scoped .box * Limit the universal match to descendants of one container.
<style>
.box * {
color: #1d4ed8;
}
</style>
<div class="box">
<p>Inside — blue</p>
<span>Also inside</span>
</div>
<p>Outside — unchanged</p> How It Works Parent first. .box narrows the search.Then any child. * matches every descendant tag.Outside stays plain. The last paragraph is not under .box.Component resets. Useful for isolating styles inside one widget.Example 3 — Border-Box Reset Make padding and borders count inside width for every element.
<style>
* {
box-sizing: border-box;
}
.card {
width: 160px;
padding: 16px;
border: 4px solid #2563eb;
background: #eff6ff;
}
</style>
<div class="card">160px total width</div> How It Works Global sizing. * sets border-box on every element.Fixed width. The card is 160px wide including padding and border.Easier layouts. You no longer add padding on top of width by accident.Often extended. Many resets also set *::before, *::after the same way.Edge Cases & Pitfalls Keep these in mind before sprinkling * everywhere.
specificity Specificity is zero Any type , class , or id selector beats a bare * on the same property.
pseudo Does not match pseudo-elements alone * selects elements only. Use *::before / *::after when you need those boxes too.
optional Often redundant with classes *.warning equals .warning. Drop the asterisk unless namespaces require it.
scope Prefer a parent when possible .widget * is safer than a page-wide * for component-only resets.
perf Heavy trees + many properties Matching every node is fine for a short reset. Avoid stuffing large rule sets onto a bare *.
Compatibility
Browser Support The universal selector is a browser CSS selector . Node.js, Deno, and Bun do not apply it.
✓ Baseline · Widely available
* Supported in all browsers since early CSS. Safe for teaching and production.
Google Chrome 1+
Full support
Mozilla Firefox 1+
Full support
Apple Safari 1+
Full support
Microsoft Edge 12+
Full support
Opera 3.5+
Full support
Samsung Internet 1+
Full support
Internet Explorer 7+
Full support * Universal
Bottom line: No prefixes. No polyfills. It is not a runtime API.
Remember
Key Takeaways Role: match elements of any type.
Scope: use .parent * to limit the match.
Specificity: * adds 0 — easy to override.
Tip: great for resets; prefer classes for components.
One line: * styles any element — scope it when you can, and keep the rule light.
Frequently Asked Questions What does the CSS universal selector (*) do? It matches elements of any type. Alone it selects every element in the document; scoped as .box * it selects every descendant inside that box.
What is the specificity of *? Zero: (0,0,0). Any type, class, or id selector overrides a bare * rule when the same property conflicts.
Does * match ::before and ::after? No. * matches elements only. To style all ::before pseudo-elements, write *::before.
Is * optional with other simple selectors? Yes. *.note and .note are equivalent. *#id and #id are equivalent.
Is * { box-sizing: border-box; } a good idea? Yes. It is a common reset so width and height include padding and border. Many projects also include *::before, *::after for the same reason.
Is the universal selector widely supported? Yes. It is Baseline Widely available. It is a browser CSS selector, not a Node.js or runtime API.
About the author Developer, cloud engineer, and technical writer
I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.
8 people found this page helpful
