title: CSS Style Nesting - Proper Form?
body: <p>I am having a problem trying to find any specific details on how to properly write CSS rules in a stylesheet where the class or ID is nested within many other IDs and styles, e.g.</p>
  
  <pre class="lang-css prettyprint-override"><code>.mainbody #container #header #toprightsearch .searchbox {}
  </code></pre>
  
  <p>So here we have a <code>searchbox</code> class within a <code>toprightsearch</code> ID, in a header ID, in a container ID, in a <code>mainbody</code> class.</p>
  
  <p>But it appears to work properly if I omit some of the IDs.</p>
  
  <p>What is the <em>correct</em> way of listing these?<br>
  If I include all of the parents does it make it more specific?
  Can it error on different browsers if I don't include all?</p>
  
  <p>And any additional information on this topic would be appreciated.</p>
  
  <p>Thanks</p>