title: What is the meaning of * and * * in CSS selectors
body: <p>What is the meaning of <code>*</code>  and <code>* *</code> in the CSS-selectors below?</p>
  
  <p>I have tried to collapse the definitions in one selector and that did not work well. If I comment the mainNav <code>* *</code> or collapse the <code>*</code> in the first selector, the layout is destroyed. </p>
  
  <pre><code>#mainNav { padding-top: 20px; padding-bottom: 20px; }  
  #mainNav * { padding-left: 20px; padding-right: 20px; } 
  #mainNav * * { padding-left: 0; padding-right: 0; }
  </code></pre>