Universal Selector (CSS Selector)

May 14, 2014

Write powerful, clean and maintainable JavaScript.

~~RRP $11.95~~

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

Create a 3D CSS Printer that Actually Prints!

HTML & CSS

By Jhey Tompkins, June 16, 2021

Learn how to make impressive 3D objects in CSS, and even how to make them do amazing things like print a real image from a URL you supply!

Squeaky Portraits: Having Fun with the CSS path() Function

HTML & CSS

By Jhey Tompkins, March 25, 2021

The CSS path() function finally has wide browser support. Learn how to use it to take your clips paths to awesome new heights.

Canvas vs SVG: Choosing the Right Tool for the Job

HTML & CSS

By Maria Antonietta Perna, February 24, 2021

Should you use Canvas or SVG? It depends! Let's walk through all the scenarios where Canvas and SVG are an option and work out which is the best choice.

Adam Roberts

Adam is SitePoint's head of newsletters, who mainly 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.