Why Universal selector in CSS? - Purpose & Use Cases

The Big Idea

What if you could style every element on your page with just one simple symbol?

The Scenario

Imagine you want to change the font style or add a border to every single element on your webpage. You start by writing CSS rules for each tag like <p>, <h1>, <div>, <nav>, and so on, one by one.

The Problem

This approach is slow and tiring. If you add new elements later, you must remember to update your CSS everywhere. It's easy to miss some tags, causing inconsistent styles and extra work.

The Solution

The universal selector (*) lets you target all elements at once. You write one simple rule, and it applies everywhere, saving time and avoiding mistakes.

Before vs After

✗ Before

p { margin: 0; }
h1 { margin: 0; }
div { margin: 0; }

✓ After

* { margin: 0; }

What It Enables

You can quickly apply base styles or resets to every element, making your design consistent and your CSS easier to maintain.

Real Life Example

When starting a new website, developers often use the universal selector to remove default spacing from all elements, so they can build their own clean layout from scratch.

Key Takeaways

Writing separate rules for every element is slow and error-prone.

The universal selector (*) targets all elements with one rule.

This makes styling faster, consistent, and easier to maintain.