title: What's the difference between `.class1.class2` and `.class1 .class2` CSS rule?
body: <p>I have a table with some rows:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr class="even"&gt;&lt;td&gt;tr0&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;tr1&lt;/td&gt;&lt;/tr&gt;
      &lt;tr class="even"&gt;&lt;td&gt;tr2&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I have a CSS rule (rule1) for even rows:</p>
  
  <pre><code>.even{
      background-color: blue;
  }
  </code></pre>
  
  <p>I have another rule (rule2) for override the bgcolor of any row:</p>
  
  <pre><code>.override, .override.even{
      background-color: green;
  }
  </code></pre>
  
  <p>The weird thing is in IE9 all <code>even</code> rows (with no <code>override</code> class) are green!<br>
  Developer tools shows this for <code>even</code> rows:</p>
  
  <p><img src="https://i.stack.imgur.com/0VrXL.png" alt="enter image description here"></p>
  
  <p>In these two conditions IE do the job correctly:</p>
  
  <p>If I rewrite rule2 like this:</p>
  
  <pre><code>.override, .override .even{ ... }
  </code></pre>
  
  <p>If I move rule2 above rule1:</p>
  
  <pre><code>.override, .override.even{ ... }
  .even { ... }
  </code></pre>
  
  <p>Question is what's the difference between <code>.override.even</code> and <code>.override .even</code>?</p>
  
  <p>EDIT:</p>
  
  <p>Thanks for replies. Another question which I forgot to ask is why IE shows the <code>even</code> rows green?</p>