Skip to main content

The Universal Selector

The Universal Selector is the simplest and broadest selector in CSS. It is represented by a single asterisk (*) and does exactly what its name suggests: it targets every single element on the HTML page.

This includes all tags like <body>, <div>, p, img, and even hidden elements like <head> content.


How to Use the Universal Selector​

The syntax is just the asterisk, followed by the declaration block.

The Syntax​

Universal Selector Syntax
* {
  /* declarations go here */
}

Example: The CSS Reset​

The Universal Selector is most commonly used to perform a CSS Reset. This involves clearing default browser styles (like margins and padding) that can cause inconsistencies between different web browsers.

styles.css
/* This essential rule removes default padding and margin from every element */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Crucial for box model consistency! */
}

Specificity Score and Performance​

The Universal Selector has the lowest specificity score of all selectors.

Selector TypeSpecificity Score
Universal(0, 0, 0, 0)

Performance and Caution​

Use Sparingly!

Due to the way browsers calculate styles, using the Universal Selector (*) for general styling (like setting a background color) is generally discouraged for large sites.

While modern browsers are fast, applying complex styles to every single element (including tags you didn't even know existed) can be slightly inefficient. Only use it for global resets.


Best Use Case: The box-sizing Rule​

The most famous and beneficial use of the Universal Selector is to enforce consistent box model behavior across your entire site.

In standard CSS, when you set an element's width, padding and border are added to that width, often resulting in unexpected layouts. By setting box-sizing: border-box;, the padding and border are instead included within the defined width.

This single ruleset is often included at the very top of professional stylesheets:

styles.css
/* 1. Target EVERYTHING */
* {
  box-sizing: border-box; 
  margin: 0; 
  padding: 0;
}

/* 2. Target pseudo-elements, which often need the same reset */
*::before, 
*::after {
  box-sizing: border-box;
}

Interactive Universal Selector Demo​

In this demo, the universal selector (*) styles every element you see, while a slightly more specific Element Selector (p) overrides only the paragraph text color.