Skip to content

universal.mdx

Latest commit

 

History

History
90 lines (64 loc) · 3.1 KB

universal.mdx

File metadata and controls

90 lines (64 loc) · 3.1 KB
title The Universal Selector
description Learn how to use the Universal Selector (*) to target every single element on a web page, and why it is primarily used for global CSS resets.
keywords
CSS Universal Selector
Asterisk Selector
Global Targeting
CSS Reset
Low Specificity
CSS Simple Selectors
CodeHarborHub
tags
CSS Universal Selector
Asterisk Selector
Global Targeting
CSS Reset
Low Specificity
CSS Simple Selectors
sidebar_label 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

* {
  /* 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.

/* 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 Type Specificity Score
Universal (0, 0, 0, 0)

Performance and Caution

:::danger 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:

/* 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.