By Adam Roberts

Universal Selector (CSS Selector)

By Adam Roberts
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min


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:

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

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.


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

* {
  margin: 0;
  padding: 0;
Login or Create Account to Comment
Login Create Account
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?