title: Is depth significant in CSS nested properties
body: <p>The title of the question gives the wrong idea, I think, but I couldn't think of a proper way to word this...</p>
  
  <p>Let's say I have the following HTML:</p>
  
  <pre><code>&lt;div id="form-wrapper"&gt;
      &lt;form id="searchbox"&gt;
          &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;label for="searchterm"&gt;Searchterm: &lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" name="searchterm" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;label for="name"&gt;Name: &lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" name="name" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to style the table cells using CSS. Is it valid to do this:</p>
  
  <pre><code>div#form-wrapper td {
      font-size: 14pt;
  }
  </code></pre>
  
  <p>Instead of this:</p>
  
  <pre><code>div#form-wrapper form table tr td {
      font-size: 14pt;
  }
  </code></pre>
  
  <p>I would think the latter is syntactically correct, since that's how the HTML elements are nested. I know I could easily test this in a JSFiddle (which I haven't, partially due to languor), but I want to know whether it's syntactically/semantically okay as well, not just if it works or not.</p>
  
  <p>Thanks!</p>