title: How to apply css to top level element only
body: <p>In my HTML I have some footer elements within separate section, and then one global footer element for the page. I want to make only the global page footer to appear on the bottom of the viewport.</p>
  
  <p>If I do this, it will affect all the footers:</p>
  
  <pre><code>footer {
      position: fixed;
      bottom: 0px;    
  }
  </code></pre>
  
  <p>If I do this, it works as expected, but the <code>body</code> syntax looks akward:</p>
  
  <pre><code>body &gt; footer {
      position: fixed;
      bottom: 0px;    
  }
  </code></pre>
  
  <p>Is there a better way to specify top-level footer only?</p>