The CSS * selector — called the universal selector — matches every element on the page. It is most famous for CSS resets that zero out margins and set box-sizing: border-box globally.
Every tag.
margin: 0.
border-box.
div *
(0, 0, 0)
Base styles.
The CSS universal selector (*) selects all elements in a document. When you write * { margin: 0; }, every HTML element — from <html> to <span> — receives that style.
It is a powerful tool for applying global defaults and CSS resets, but it should be used thoughtfully. Because it targets everything, heavy styles on * can affect performance on very large pages.
The most common real-world use of * is the universal box-sizing: border-box reset, which makes layout math predictable. You can also scope it: .card * affects only elements inside .card, not the whole page.
Think of * as “select everything.” It is perfect for one-time resets at the top of your stylesheet, then use element, class, and id selectors for actual design styles.
The syntax for the universal * selector is:
* {
/* CSS properties */
}Scope it to a container’s descendants:
.container * {
margin: 0;
padding: 0;
}
div * {
box-sizing: border-box;
}* { } box-sizing .card * margin: 0| Selector | Example | Specificity |
|---|---|---|
| Universal | * | (0, 0, 0) — lowest |
| Element | p | (0, 0, 1) |
| Class | .intro | (0, 1, 0) |
| Scoped universal | div * | (0, 0, 2) |
* alone matches every element in the document.parent * matches all descendants inside parent, not the parent itself.margin, padding, box-sizing.* in production.box-sizing — often set globally via *| Question | Answer |
|---|---|
| Also known as | Universal selector, all selector |
| What it targets | Every element (or all descendants when scoped) |
| Syntax | * { } |
| Specificity | (0, 0, 0) — lowest possible |
| Most common use | * { box-sizing: border-box; } reset |
| Browser support | All browsers (CSS 1) |
The universal selector is best for foundational setup:
box-sizing: border-box globally for predictable layouts..widget * to reset styles inside a component only.font-family that all elements inherit.* to debug layout (dev only).This demo box uses .uni-demo-wrap * to reset margin and padding on all nested elements:
Heading and paragraph have zero default margins thanks to the * rule scoped to this wrapper.
Sample linkOutside this box, normal browser margins still apply.
Practice the * selector with CSS resets, box-sizing, scoped universals, and inherited font defaults.
Apply global resets to every element on the page.
Remove default browser spacing from all elements with a single * rule.
* {
margin: 0;
padding: 0;
}
body {
font-family: system-ui, sans-serif;
padding: 1.5rem;
}Browsers add default margins to h1, p, ul, and other elements. The * rule zeros them all at once. You then add intentional spacing on body or specific components.
The most popular * pattern — make padding and borders count inside element width.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 200px;
padding: 20px;
border: 2px solid #2563eb;
}Without border-box, a 200px box with 20px padding and 2px border would overflow its container. Setting it on * ensures every element uses the intuitive box model by default.
Limit * to a container or set inherited defaults.
Reset only elements inside a specific container, leaving the rest of the page untouched.
.card * {
margin: 0;
}
.card {
padding: 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
background: #f8fafc;
}
.card h3 {
margin-bottom: 0.35rem;
color: #1e293b;
}.card * selects every descendant inside .card but not the card itself. This gives you component-level control without affecting the rest of the page.
Set a base font on all elements so form inputs and buttons inherit it too.
* {
font-family: system-ui, sans-serif;
}
body {
color: #334155;
line-height: 1.6;
padding: 1.5rem;
}
input {
padding: 0.5rem;
border: 1px solid #cbd5e1;
border-radius: 0.35rem;
}Form elements like input and button do not always inherit font-family from body. Setting it on * ensures every element — including inputs — uses the same typeface.
* reset as the first rules in your stylesheet.box-sizing: border-box..component * instead of global * for isolated widgets.* with element, class, and id rules.*.* { outline: 1px solid red; } helps visualize layout (remove before shipping).*; do not rely on it for important styles.color on * cascade to everything, including form controls.div * does not select the div itself, only its children.* is for resets, not for building your entire design system.* resets can unintentionally affect embedded widgets or iframes.outline on * without providing alternative :focus styles.font-family on * helps inputs match body text (good for consistency).* { display: none; } or similar destructive global rules.* WorksYou declare * { box-sizing: border-box; } in your CSS.
Every element in the document (or scoped parent) is selected.
Reset properties take effect on every matched element.
More specific selectors layered on top override * where needed.
The universal * selector has been supported since CSS 1 and works in every browser.
The * selector works in Chrome, Firefox, Safari, Edge, Opera, and all legacy browsers without prefixes or fallbacks.
Bottom line: The safest selector for global resets. Use freely in every project.
The CSS * universal selector is a versatile tool for targeting every element on a page. It is especially valuable for CSS resets that normalize browser defaults and set box-sizing: border-box globally.
Use it with care — keep rules lightweight, scope when possible, and layer more specific selectors on top for your actual design styles.
* for margin/padding resets at the top of CSSbox-sizing: border-box in your reset.component * for isolated widgetsfont-family on * for form consistency** as your only styling approach* in production*Use these points when writing CSS resets.
Universal.
SyntaxLowest.
CascadeTop use.
Reset.card *
PatternCSS 1.
CompatOpen the HTML editor and experiment with * resets, box-sizing, and scoped .card * patterns.
5 people found this page helpful