Universal selector in CSS - Deep Dive

Overview - Universal selector

What is it?

The universal selector in CSS is a special symbol (*) that matches every element on a web page. It lets you apply styles to all HTML elements at once without naming them individually. This is useful for setting a common style or resetting default browser styles quickly. It works like a catch-all for any element in the document.

Why it matters

Without the universal selector, you would have to write styles for each HTML element separately to apply a common look or reset styles. This would be slow and error-prone, especially on large pages. The universal selector saves time and ensures consistency by letting you target everything at once. It helps create a clean starting point for your page’s design.

Where it fits

Before learning the universal selector, you should understand basic CSS selectors like element, class, and ID selectors. After mastering it, you can learn about more advanced selectors like attribute selectors, pseudo-classes, and combinators to target elements more precisely.

Mental Model

Core Idea

The universal selector (*) matches every single element on the page, letting you style all elements at once.

Think of it like...

Imagine you want to paint every room in a house the same color. Instead of going room by room, you use a big roller that covers every wall in every room at once. The universal selector is like that big roller for styling web pages.

┌───────────────────────────────┐
│          Web Page              │
│  ┌─────────┐  ┌─────────────┐ │
│  │ <div>   │  │ <p>         │ │
│  │  *     *│  │  *         *│ │
│  └─────────┘  └─────────────┘ │
│  * = styled by universal (*)  │
└───────────────────────────────┘

Build-Up - 6 Steps

1

Foundation

What is the universal selector

Concept: Introduce the * symbol as a CSS selector that matches all elements.

In CSS, selectors choose which HTML elements to style. The universal selector is written as a single asterisk (*). It matches every element on the page, no matter what tag it is. For example: * { color: blue; } This will make the text color blue for all elements.

Result

All text on the page changes to blue because every element is selected.

Understanding that * matches everything helps you quickly apply styles globally without naming each element.

2

Foundation

Basic syntax and usage

Concept: Show how to write and apply the universal selector in CSS rules.

The universal selector is used just like any other selector but with the * symbol. It can be combined with other selectors or used alone. Example: * { margin: 0; padding: 0; } This resets margin and padding for all elements, which is a common practice to remove browser default spacing.

Result

All elements have no margin or padding, creating a clean slate for layout.

Knowing the syntax lets you use the universal selector to reset or unify styles efficiently.

3

Intermediate

Combining universal selector with other selectors

🤔Before reading on: do you think * can be combined with classes or element names? Commit to your answer.

Concept: Explain how the universal selector can be combined with other selectors to narrow down targets.

You can combine * with classes or attributes to select all elements that match those conditions. For example: .highlight { background-color: yellow; } This selects all elements with class 'highlight'. The * is optional here but shows you can combine it. Another example: div * { font-size: 14px; } This selects every element inside any

.

Result

Only elements with the class 'highlight' get a yellow background, or all elements inside divs get font size 14px.

Understanding combinations helps you use the universal selector flexibly without losing precision.

4

Intermediate

Performance considerations of universal selector

🤔Before reading on: do you think using * slows down page rendering significantly? Commit to your answer.

Concept: Discuss how the universal selector affects browser performance and when to avoid it.

Because * matches every element, browsers must apply styles to all nodes, which can be slow on large pages. Using * in complex selectors or repeatedly can hurt performance. For example, * > p applies to every

directly inside any element, which can be costly. It's best to use * sparingly and prefer more specific selectors when possible.

Result

Pages with heavy use of * may render slower, especially on devices with less power.

Knowing performance impact helps you write efficient CSS that keeps pages fast.

5

Advanced

Universal selector in CSS resets and normalization

🤔Before reading on: do you think universal selector alone is enough for a full CSS reset? Commit to your answer.

Concept: Explain how the universal selector is used in popular CSS resets and why it matters.

Many CSS reset stylesheets use * to remove default margin, padding, and border from all elements, creating a consistent baseline across browsers. For example: * { margin: 0; padding: 0; box-sizing: border-box; } However, universal selector alone is not enough for full resets because some elements need special treatment. Resets combine * with element-specific rules for best results.

Result

A consistent look across browsers with fewer surprises in spacing and sizing.

Understanding the universal selector's role in resets shows its practical importance in real projects.

6

Expert

Unexpected behavior with universal selector and inheritance

🤔Before reading on: does the universal selector override inherited styles by default? Commit to your answer.

Concept: Reveal how the universal selector interacts with CSS inheritance and specificity in subtle ways.

The universal selector matches all elements but has low specificity. It does not override styles set by more specific selectors or inline styles. Also, some CSS properties inherit by default (like color), so applying them with * may not change inherited values unless explicitly set. For example: * { color: red; } But if a parent element sets color to blue with a class, that color may override the universal selector's red due to specificity. This can cause confusion if you expect * to force styles everywhere.

Result

Some elements keep their inherited or more specific styles despite the universal selector rule.

Knowing how specificity and inheritance interact with * prevents bugs and unexpected styling results.

Under the Hood

When the browser reads CSS, it builds a list of rules and matches selectors against each element in the HTML tree. The universal selector (*) matches every element node, so the browser applies the rule's styles to all elements. However, because * has the lowest specificity, any other rule with higher specificity will override it. The browser optimizes matching by indexing selectors, but * still requires checking every element, which can be costly on large documents.

Why designed this way?

The universal selector was created to provide a simple way to target all elements without listing them individually. It helps developers reset or unify styles quickly. Its low specificity ensures it doesn't unintentionally override more specific rules, preserving the cascade principle. Alternatives like listing all tags would be tedious and error-prone, so * offers a concise, flexible solution.

┌───────────────┐
│ CSS Rule List │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Selector Match│
│  * matches   │
│  every elem  │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Apply Styles  │
│  to all elems │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Cascade &     │
│ Specificity   │
│  resolve     │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does the universal selector (*) select only visible elements? Commit yes or no.

Common Belief: The universal selector only selects visible elements on the page.

Reality: The universal selector matches every element in the DOM, regardless of visibility or display properties.

Why it matters: Assuming it selects only visible elements can cause confusion when styles apply to hidden elements, affecting layout or performance unexpectedly.

Quick: Does * have higher specificity than class selectors? Commit yes or no.

Common Belief: The universal selector has higher specificity than class selectors because it matches everything.

Reality: The universal selector has the lowest specificity of all selectors, so class selectors override it.

Why it matters: Misunderstanding specificity can lead to unexpected style overrides and debugging headaches.

Quick: Can the universal selector be used to select only certain elements by attribute? Commit yes or no.

Common Belief: You can use * alone to select elements with specific attributes without combining selectors.

Reality: The universal selector alone selects all elements; to target attributes, you must combine * with attribute selectors like *[type='text'].

Why it matters: Thinking * alone filters by attribute leads to incorrect CSS and styling errors.

Quick: Does using * always slow down page rendering significantly? Commit yes or no.

Common Belief: Using the universal selector always causes major performance problems.

Reality: While * can impact performance on very large pages or complex selectors, modern browsers optimize it well, and occasional use is usually fine.

Why it matters: Overestimating performance costs may cause developers to avoid useful selectors unnecessarily.

Expert Zone

1

The universal selector’s low specificity means it’s often used in resets but rarely to enforce styles that must override others.

2

When combined with pseudo-classes like *:not(.class), it can create powerful selectors that exclude certain elements while targeting all others.

3

In CSS-in-JS or scoped styles, the universal selector behaves differently depending on how styles are injected, affecting its global reach.

When NOT to use

Avoid using the universal selector in large, complex selectors or animations where performance is critical. Instead, use more specific selectors or class-based targeting. For resetting styles, consider using specialized reset or normalize CSS libraries that handle edge cases better.

Production Patterns

In production, the universal selector is commonly used in CSS resets to remove default spacing and set box-sizing. It’s also used in utility-first CSS frameworks to apply base styles globally. However, it’s rarely used alone for styling components due to specificity and performance concerns.

Connections

CSS Specificity

The universal selector has the lowest specificity, which affects how styles cascade and override each other.

Understanding the universal selector’s specificity helps grasp the entire CSS cascade system and why some styles win over others.

Inheritance in CSS

The universal selector applies styles directly but does not affect inherited properties unless explicitly set.

Knowing how inheritance works alongside the universal selector clarifies why some styles seem to 'skip' elements despite * matching them.

Global Reset in Software Engineering

The universal selector’s role in CSS resets parallels global reset patterns in other fields, like clearing default states in programming or resetting hardware.

Recognizing this pattern across domains shows how starting from a clean slate is a common strategy to avoid hidden defaults and inconsistencies.

Common Pitfalls

#1 Applying styles with * but expecting them to override more specific rules.

Wrong approach:

* {
color: red;
}

.some-class {
color: blue;
}

Correct approach:

.some-class {
color: blue;
}

* {
color: red;
}

Root cause:

Misunderstanding CSS specificity order causes the universal selector’s styles to be overridden by more specific selectors.

#2 Using * in complex selectors causing slow page rendering.

Wrong approach:

div * > p {
font-weight: bold;
}

Correct approach:

div > p {
font-weight: bold;
}

Root cause:

Overusing * in selectors increases the number of elements the browser must check, hurting performance.

#3 Expecting * to select only elements with certain attributes without combining selectors.

Wrong approach:

* {
border: 1px solid black;
}

/* expecting only inputs to get border */

Correct approach:

*[type='text'] {
border: 1px solid black;
}

Root cause:

Confusing the universal selector with attribute selectors leads to styling all elements unintentionally.

Key Takeaways

The universal selector (*) matches every element on the page, allowing global styling with one rule.

It has the lowest specificity, so more specific selectors override its styles.

Using * is common in CSS resets to create a consistent baseline across browsers.

Overusing the universal selector in complex selectors can hurt performance, so use it carefully.

Understanding how * interacts with inheritance and specificity prevents unexpected styling results.