title: What is the performance impact of the universal selector?
body: <p>I'm trying to find some simple client-side performance tweaks in a page that receives millions of monthly page views. One concern that I have is the use of the CSS universal selector (<code>*</code>).</p>
  
  <p>As an example, consider a very simple HTML document like the following:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
    &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
      &lt;title&gt;Example&lt;/title&gt;
      &lt;style type="text/css"&gt;
        * {
          margin: 0;
          padding: 0;
        }
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;This is a heading&lt;/h1&gt;
      &lt;p&gt;This is a paragraph of text.&lt;/p&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The universal selector will apply the above declaration to the <code>body</code>, <code>h1</code> and <code>p</code> elements, since those are the only ones in the document.</p>
  
  <p>In general, would I see better performance from a rule such as:</p>
  
  <pre><code>body, h1, p {
    margin: 0;
    padding: 0;
  }
  </code></pre>
  
  <p>Or would this have exactly the same net effect?</p>
  
  <p>Does the universal selector perform more work that I may not be aware of?</p>
  
  <p>I realize that the performance impact in this example may be very small, but I'm hoping to learn something that may lead to more significant performance improvements in real-world situations.</p>
  
  <p>I don't intend to override the styles in the universal selector rule with other styles later in the document - i.e., using it as a quick and dirty reset stylesheet. I'm actually trying to use the universal selector exactly as I think it's intended - to apply a rule set to all elements in the document, once and for all.</p>
  
  <p>Ultimately, I'm hoping to determine if there is something inherently slow about the universal selector, or if it just has a bad rap due to rampant misuse. If <code>* { margin: 0; }</code> is literally equivalent to <code>body, h1, p { margin: 0; }</code>, then that will answer my question, and I'll know to go with the former since it's more concise. If not, I want to understand why the universal selector performs more slowly.</p>