title: Can't override css of element
body: <p>I have a website with a global template that contains partial templates, but now I'm stuck with a simple CSS problem:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="context"&gt; &lt;!-- this is part of global template --&gt;
      &lt;!-- this is rendered by partial template --&gt;
      &lt;select id="test"&gt;
          &lt;option&gt;[Select a value]&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Global CSS</strong></p>
  
  <p>In a global stylesheet the default width for all <code>&lt;select&gt;</code> elements inside <code>#context</code> is defined:</p>
  
  <pre><code>div#context select
  {
     width: 500px;
  }
  </code></pre>
  
  <p><strong>Partial CSS</strong></p>
  
  <p>Now for the partial template (which renders content inside <code>#context</code>), I need to override the default width of <code>&lt;select&gt;</code>. I thought this would be as simple as:</p>
  
  <pre><code>select#test
  {
      width: 150px;
  }
  </code></pre>
  
  <p>But I was wrong, it doesn't work. And I guess it is because css thinks <code>div#context select</code> is a better match for the element, because it works when I change the partial template css like this:</p>
  
  <pre><code>div#context select#test
  {
      width: 150px;
  }
  </code></pre>
  
  <p>Of course, this is not what I want to do, because the partial template should not know in which node it is rendered inside the global template.</p>
  
  <p>Any ideas on how I can override the style for the partial template without specifying an element from the global template?</p>
  
  <p>See <a href="http://jsfiddle.net/XvZSz/" rel="noreferrer">jsFiddle</a></p>