title: css3 media query and select
body: <p>Not sure how to combine two media queries where one is conditional.</p>
  
  <p>As I am doing it now, I have an entire block of styles duplicated.</p>
  
  <p>The intent:</p>
  
  <p><em>If window width &lt; 900px</em></p>
  
  <p><strong>OR</strong></p>
  
  <p><em>if window width &lt; 1300px <strong>ONLY WHEN</strong> html[leng="he"]</em></p>
  
  <p><strong>THEN</strong></p>
  
  <p><em>nav.main's height should be auto (and all the other styles apply too)</em></p>
  
  <pre><code>@media only screen and (max-width: 900px) {
          nav.main {
              height: auto;
          }
          ...many more rules
  }
  
  @media only screen and (max-width: 1130px) {
      html[lang="he"] {
          nav.main {
              height: auto;
          }
          ...identical rules as above
      }
  }
  </code></pre>
  
  <p>Any way I can combine these so that the style block is not written twice?</p>