Universal Selector (CSS Selector)

By Adam Roberts

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;
}

Recommended

Sass Functions to Kick-Start Your Style Sheets

Byron shows us some of Sass functions built into the language and shows how you can use them to kick-start your style sheets.

Byron Houwens, 2 days ago

HTML & CSS

How to Create Beautiful HTML & CSS Presentations with WebSlides

Ivaylo Gerchev guides you step by step as you create a beautiful HTML and CSS web presentation using WebSlides, a fantastic framework for...

Ivaylo Gerchev, 3 days ago

HTML & CSS

8 Comments

HTML & CSS

Sass Functions to Kick-Start Your Style Sheets

Byron shows us some of Sass functions built into the language and shows how you can use them to kick-start your style sheets.

HTML & CSS

How to Create Beautiful HTML & CSS Presentations with WebSlides

Ivaylo Gerchev guides you step by step as you create a beautiful HTML and CSS web presentation using WebSlides, a fantastic framework for this kind of task.

Meet the author

Adam Roberts

Adam is SitePoint's head of content, who also writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.