CSS Universal Selector

The CSS universal selector selects elements regardless of their element type. It is represented by an asterisk (*) and is useful for applying CSS declarations broadly to elements in a document or within a more specific selector.

Syntax

The universal selector is represented by an asterisk (*):

* {
  property: value;
}

For example, the following rule applies box-sizing: border-box to every element matched by the universal selector:

* {
  box-sizing: border-box;
}

How the Universal Selector Works

When used by itself, the universal selector matches every element in its applicable namespace. In an ordinary HTML stylesheet without namespace restrictions, * can be used to match HTML elements throughout the document.

* {
  margin: 0;
}

This rule sets the margin to 0 on every element matched by the selector.

Combining with Other Selectors

The universal selector can be combined with combinators, classes, attributes, pseudo-classes, and other selectors to narrow the elements that are matched.

.content > * {
  margin-bottom: 20px;
}

This selector matches every element that is a direct child of an element with the content class.

The universal selector can also be combined with other simple selectors:

*.highlight {
  color: #0088cc;
}

In this example, * does not further restrict the match, so *.highlight is equivalent to .highlight.

Universal Selector and Namespaces

The universal selector can be qualified with a namespace prefix when CSS namespaces are being used.

*|*
ns|*
|*

The form *|* matches elements in any namespace. A form such as ns|* matches elements in the namespace associated with the ns prefix, while |* matches elements that are not in a namespace.

Namespace-qualified universal selectors are covered separately in the Namespace Universal Selector reference.

Specificity

The universal selector contributes 0-0-0 to a selector's specificity. Other selectors combined with it still contribute their normal specificity values.

Selector	Specificity
`*`	`0-0-0`
`*.highlight`	`0-1-0`
`.content > *`	`0-1-0`
`#content *`	`1-0-0`

The universal selector itself adds no specificity, even though it can match a large number of elements.

Universal Selector Example

The following example uses .example * to select every element inside the example container. The container itself is not selected because the universal selector appears after the descendant combinator.

.example * {
  color: #0088cc;
}

Play in Editor

Other basic selectors select elements according to their element name, class, ID, or attributes:

Specifications

The universal selector is defined in the Selectors Level 4 specification.

CSS Universal Selector