Universal Selector in CSS — How to Target All Elements at Once

After learning the element selector, then class and id, it is time for a very different selector: the Universal Selector. This selector is written with the asterisk * and targets every element on the page at once.

It is a very powerful selector, so you must use it wisely. If you use it correctly it saves time, but if you overuse it, it can add unnecessary complexity.

This lesson is for anyone searching for Universal Selector in CSS or the * selector in CSS or the best way to do CSS Reset.

What Is the Universal Selector (*)?

The universal selector is a general CSS selector that matches all elements on the page: headings, paragraphs, images, links, buttons, and everything else.

Simple definition: The asterisk * means "select all elements".

How Do You Write the Universal Selector?

* {
    color: red;
    text-align: center;
}

What does this code do? It applies red text color and centered alignment to all elements with text.

Line by line:

• *: selects all elements on the page.
• color: red;: makes text red.
• text-align: center;: centers text inside elements.

Expected result: a wide change across most page components.

Common mistake: using it for global colors and fonts, then struggling to override specific elements later.

Most Common Practical Use: CSS Reset

Browsers add default values like margin and padding to elements. These values sometimes differ from one browser to another. That is why developers use the universal selector at the top of the file to create a consistent baseline.

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

What does this code do? It removes default spacing and makes width/height calculations more predictable.

Line by line:

• margin: 0;: removes default outer margins.
• padding: 0;: removes default inner padding.
• box-sizing: border-box;: includes padding and border within the element dimensions.

Expected result: a clean, consistent start for layout.

Common mistake: forgetting to reintroduce spacing after reset, leaving the UI cramped.

Full Example: Before Reset and After Reset

HTML:

<h1>Page Title</h1>
<p>A short intro paragraph.</p>
<button>Start Now</button>

CSS (before):

/* Without reset */
h1 {
    background: #dbeafe;
}

CSS (after):

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

h1 {
    background: #dbeafe;
    margin-bottom: 16px;
}

p {
    margin-bottom: 12px;
}

What does this example show? After resetting defaults, you control all spacing manually.

Expected result: more precise design and consistent behavior across browsers.

Common mistake: applying reset without adding margin-bottom for headings and paragraphs, so natural spacing disappears.

When Should You Use the Universal Selector (*)?

• At the start of a project for a simple reset or normalize.
• To set a global base like box-sizing.
• For quick development tests (then remove the rule later if needed).

When Should You Avoid Using the Universal Selector Directly?

• When applying detailed design styles (colors, special fonts, heavy borders).
• On very large pages where more precise rules are better.
• When you need fine-grained control for each part of the UI.

Common Mistakes in Universal Selector CSS

1) Making everything the same color and font:

* {
    color: #111;
    font-size: 22px;
}

What happens here? The styling becomes too general and can ruin text hierarchy.

Expected result: major difficulty managing styles later.

Common mistake: treating * as a replacement for a structured design system.

2) Forgetting that all elements are affected:

Any change inside a * rule may touch elements you did not intend (lists, buttons, form elements, etc.).

3) Using it without explanatory comments:

Because the impact is wide, add a short comment to explain the purpose so the code stays clear for the team.

Frequently Asked Questions — FAQ

What is the difference between Reset.css and Normalize.css?

Reset.css removes most defaults so you start from zero, while Normalize.css keeps useful defaults and only normalizes differences. For beginners, a simple reset with the universal selector is fine, while bigger projects often prefer normalize.

Does the universal selector (*) affect site speed?

The effect is usually minimal if the rule is short and focused (like reset). Performance issues usually appear when you apply too many heavy styles globally.

Does the universal selector apply to ::before and ::after automatically?

Not directly. If you want to target pseudo-elements, include them explicitly: *::before and *::after.

Can I combine the universal selector with other selectors?

Yes, for example:

.card * {
    font-family: "Tahoma", sans-serif;
}

What does this code do? It applies the font to all elements inside .card only.

Expected result: a broad effect within a limited scope.

Common mistake: forgetting this will also include buttons and links inside the card.

Is there a better alternative to reset with the universal selector?

Yes, some projects use Normalize.css or a more advanced reset. But for beginners, a simple reset with the universal selector is enough in most cases.