The universal selector, written as an asterisk *, matches every single element in the document, commonly used for broad resets like removing default margins or setting box-sizing globally.

Syntax

* {
  property: value;
}

Deep Dive Course

The universal selector applies its declarations to literally every element on the page, making it the broadest possible selector — it's most commonly seen in CSS reset or normalize stylesheets, applying something like box-sizing: border-box to every element at once, or zeroing out default margin and padding before more specific, intentional styles are layered on top. It carries zero specificity, even lower than a type selector, meaning virtually any other selector, including a plain type selector, easily overrides it.

1Understanding Universal Selectors

💡

The universal selector's zero specificity means it's meant purely as a foundational reset layer — never rely on it for anything you expect to survive being overridden, since essentially any other selector targeting the same element and property will win.

editor.html

* {
  box-sizing: border-box;
}

localhost:3000

2Practical Example

Here is a real-world application of Universal Selectors showing how it is used in production CSS code.

editor.html

* {
  margin: 0;
  padding: 0;
}

h1 {
  margin-bottom: 10px;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Universal Selectors:

1. Use the universal selector primarily for broad, foundational resets, like box-sizing: border-box or zeroing default margins, at the very start of a stylesheet

2. Avoid applying computationally expensive properties broadly via the universal selector on very large, complex pages, since it touches literally every element and can have a measurable performance cost

3. Combine the universal selector with a descendant combinator sparingly, like .container *, since it also matches deeply nested elements you may not have intended to target

⚠️

Tip: The universal selector's zero specificity means it's meant purely as a foundational reset layer — never rely on it for anything you expect to survive being overridden, since essentially any other selector targeting the same element and property will win.

editor.html

* {
  box-sizing: border-box;
}

localhost:3000

Examples

Example 01Basic Usage

* {
  box-sizing: border-box;
}

Example 02Advanced Example

* {
  margin: 0;
  padding: 0;
}

h1 {
  margin-bottom: 10px;
}

Best Practices

Use the universal selector primarily for broad, foundational resets, like box-sizing: border-box or zeroing default margins, at the very start of a stylesheet
Avoid applying computationally expensive properties broadly via the universal selector on very large, complex pages, since it touches literally every element and can have a measurable performance cost
Combine the universal selector with a descendant combinator sparingly, like .container *, since it also matches deeply nested elements you may not have intended to target

Interview Question

Why is the universal selector considered to have zero specificity, and what practical consequence does that have when it conflicts with a type selector like p targeting the same property?▼

Hint: Think about whether the universal selector contributes any weight at all to CSS's specificity scoring, compared to even the lowest-weighted named selector.

CSS's specificity calculation assigns weight based on specific categories of selector components, ID selectors, class/attribute/pseudo-class selectors, and type/pseudo-element selectors, and the universal selector doesn't fall into any of those weighted categories at all, contributing a specificity of exactly zero, lower even than a type selector's already-minimal weight. This means that whenever a universal-selector rule and a type-selector rule both target the same property on the same element, the type selector's rule always wins, regardless of which one appears earlier or later in the stylesheet, purely because it has strictly greater specificity, even though a type selector is itself already the lowest-specificity named selector available. This is exactly the intended design: the universal selector sits below even the most basic named selectors specifically so it can serve as an easily-overridden foundational layer, a reset or default, that virtually any subsequent, more targeted rule can freely take precedence over.

Exercises

MediumPractice using Universal Selectors in a real scenario.

View Solution

* {
  box-sizing: border-box;
}

Frequently Asked Questions

Why is the universal selector considered to have zero specificity, and what practical consequence does that have when it conflicts with a type selector like p targeting the same property?▼

Related Functions

Basic-SelectorsBox-sizingCSS-Rules