6. Core Selectors: The Universal Selector (*)

Selectors are the engine of CSS; they determine exactly which elements a given rule applies to. We start with the simplest: the Universal Selector.

The Universal Selector (`*`)

The asterisk (*) targets every single element in the HTML document.

html

Title

Paragraph text

Span content

If we apply this CSS:

css

{ box-sizing: border-box; /* A common use case */ margin: 0; padding: 0; }

This rule applies to body, header, h1, p, div, and span—literally everything.

Practical Use Case: Resetting Defaults

The most frequent and recommended use of the universal selector is in combination with modern CSS resets or normalization techniques. Browsers often apply default margins and padding to elements (like body or h1). The universal selector is often used to zero these out, providing a clean slate:

css /* WARNING: Using * alone for complex styles is usually inefficient. But for resets, it is accepted practice. */

{ margin: 0; padding: 0; }

Note on Performance: While convenient, be cautious using * for highly complex styling, as the browser must evaluate the rule for every element on the page. In many cases, it’s better to target specific elements (like h1, p) when applying aesthetic styles.