Universal Selector (CSS Selector)

Description

The universal selector matches any element type. It can be implied (and therefore omitted) if it isn’t the only component of the simple selector. The two selector examples shown here are equivalent:

*.warning {
  ⋮ declarations
}
.warning {
  ⋮ declarations
}

It’s important not to confuse the universal selector with a wildcard character—the universal selector doesn’t match “zero or more elements.” Consider the following HTML fragment:

<body>
  <div>
    <h1>The <em>Universal</em> Selector</h1>
    <p>We must <em>emphasize</em> the following:</p>
    <ul>
      <li>It's <em>not</em> a wildcard.</li>
      <li>It matches elements regardless of <em>type</em>.</li>
    </ul>
    This is an <em>immediate</em> child of the division.
  </div>
</body>

The selector div * em will match the following em elements:

“Universal” in the h1 element (* matches the <h1>)
“emphasize” in the p element (* matches the <p>)
“not” in the first li element (* matches the <ul> or the <li>)
“type” in the second li element (* matches the <ul> or the <li>)

However, it won’t match the <em>immediate</em> element, since that’s an immediate child of the div element—there’s nothing between <div> and <em> for the * to match.

Example

This rule set will be applied to every element in a document:

* {
  margin: 0;
  padding: 0;
}

Frequently Asked Questions about Universal Selector in CSS

What is the difference between the universal selector and other selectors in CSS?

The universal selector in CSS is represented by an asterisk (*) and it matches any element in the document. This is different from other selectors like class selectors, id selectors, or element selectors that only match specific elements based on their class, id, or element type. The universal selector is a powerful tool but should be used sparingly as it can lead to unexpected results if not used carefully.

Can the universal selector be combined with other selectors?

Yes, the universal selector can be combined with other selectors to create more specific rules. For example, you can combine the universal selector with a class selector to apply a style to all elements with a specific class.

What is the specificity of the universal selector?

The universal selector has the lowest specificity in CSS. This means that if there are conflicting styles, the style defined by the universal selector will be overridden by styles defined by other selectors.

Does the universal selector affect performance?

While the universal selector can affect performance, the impact is usually negligible on modern browsers. However, it’s still a good practice to use more specific selectors whenever possible to reduce the amount of work the browser has to do.

Can the universal selector be used in media queries?

Yes, the universal selector can be used in media queries. This can be useful for applying styles to all elements on the page under certain conditions, such as when the viewport is a certain width.

How does the universal selector interact with inheritance in CSS?

The universal selector can override inherited styles. However, because it has the lowest specificity, it can be overridden by other selectors.

Can the universal selector target pseudo-elements and pseudo-classes?

Yes, the universal selector can target pseudo-elements and pseudo-classes. However, it’s generally better to use more specific selectors for these cases.

What are some common use cases for the universal selector?

The universal selector is often used for resetting styles, such as removing default margins and padding from all elements. It can also be used to apply a style to all elements on the page, such as setting a default font or color.

Are there any drawbacks to using the universal selector?

While the universal selector is a powerful tool, it should be used sparingly. Overuse can lead to unexpected results and can make your CSS harder to maintain. It can also potentially impact performance, although this is usually negligible on modern browsers.

How does the universal selector work in different browsers?

The universal selector is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, there may be slight differences in how it is implemented, so it’s always a good idea to test your CSS in multiple browsers.