Universal Selector

CSS Universal Selector

The CSS universal selector is represented by an asterisk (*) and can match HTML elements without specifying an element name, class, or ID. It is commonly used when a CSS rule needs to apply broadly to elements on a page or within a particular part of a document.

Universal Selector Syntax

The universal selector is written as an asterisk (*). When used by itself, it represents any element that matches in that context.

* {
  box-sizing: border-box;
}

Unlike an element selector such as p, a class selector such as .notice, or an ID selector such as #intro, the universal selector does not specify a particular element name or attribute value.

Selecting Elements

When the universal selector is used by itself, the declarations in the rule can apply to elements throughout the document.

* {
  color: blue;
}

<h2>Page Heading</h2>
<p>This is a paragraph.</p>
<strong>This is important text.</strong>

The * selector can match the heading, paragraph, <strong> element, and other elements in the document.

Using the Universal Selector with Box Sizing

A common practical use of the universal selector is applying the same box-sizing value broadly across a page.

* {
  box-sizing: border-box;
}

The box-sizing: border-box; declaration changes how an element's specified width and height are calculated so that its padding and border are included within those dimensions.

You will often see the universal selector used for this type of page-wide CSS setting because the same declaration is intended for many elements rather than one particular element type or class.

Selecting Elements Within Another Element

The universal selector can also be combined with other selectors. For example, it can represent elements that are descendants of a particular element or class.

.notice * {
  color: blue;
}

<div class="notice">
  <h2>Notice</h2>
  <p>This paragraph is inside the notice.</p>
</div>

<p>This paragraph is outside the notice.</p>

The selector .notice * matches descendant elements inside an element with the notice class. It does not select the .notice element itself, and the paragraph outside the notice does not match.

The space between .notice and * is important. Selectors that use this relationship are covered more closely in the Descendant Selectors tutorial.

Universal Selector and Specificity

The universal selector does not add specificity to a selector. This means a rule using only * can easily be overridden by applicable rules using element, class, or ID selectors when the other cascade factors allow it.

* {
  color: blue;
}

p {
  color: red;
}

<p>This paragraph is red.</p>

Both rules can match the paragraph, but the p element selector has greater specificity than the universal selector, so the paragraph is red.

Using the Universal Selector Carefully

Because the universal selector can match a large number of elements, it is important to consider whether a rule really should apply that broadly. A declaration intended only for paragraphs, headings, or a particular component should usually use a more appropriate selector.

/* Broad */
* {
  margin: 0;
}

/* More targeted */
p {
  margin-bottom: 16px;
}

The first rule can affect many elements, while the second rule specifically targets paragraphs. Neither approach is automatically correct or incorrect; the selector should match the purpose of the style being applied.

When to Use the Universal Selector

The universal selector is useful when a declaration is intentionally meant to apply to elements broadly, or when it is combined with another selector to match elements within a particular context.

For routine styling, element and class selectors are often more descriptive because they make it clearer which elements a rule is intended to affect. The universal selector is best used when matching elements without restricting them by element name, class, or ID is actually part of the goal.

Summary

The CSS universal selector is written as an asterisk (*) and can match elements without specifying an element name, class, or ID. It can be used by itself for broad rules or combined with other selectors to limit where elements are matched.

The universal selector does not add specificity, so more specific selectors can take precedence when declarations conflict. The next tutorial covers selector lists, which allow several selectors to share the same group of CSS declarations.