title: Why does the order of css selectors matter?
body: <p>Here is example 1 (<a href="http://jsfiddle.net/bessarabov/s581mv5a/" rel="nofollow">jsfiddle</a>):</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="class_1 class_2"&gt;
  This is a text
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.class_1 {
      font-size: 1em;
      color: blue;
   }
  
  .class_2 {
      font-size: 2em;
  }
  </code></pre>
  
  <p>It works exaclty the way I expect. I have <code>&lt;div class="class_1 class_2"&gt;</code> and
  the result is <code>color</code> from <code>class_1</code> and <code>font-size</code> from <code>class_2</code>. As I
  understand it the <code>font-size</code> rule in <code>class_2</code> replaces the <code>font-size</code> rule
  from the <code>class_1</code>.</p>
  
  <p>Here is the example 2 (<a href="http://jsfiddle.net/bessarabov/qesL1sj9/" rel="nofollow">jsfiddle</a>).</p>
  
  <p>It has the same html:</p>
  
  <pre><code>&lt;div class="class_1 class_2"&gt;
  This is a text
  &lt;/div&gt;
  </code></pre>
  
  <p>But the css selectors are in reversed order:</p>
  
  <pre><code>.class_2 {
      font-size: 2em;
  }
  
  .class_1 {
      font-size: 1em;
      color: blue;
  }
  </code></pre>
  
  <p>And this code does not work as I expect. I exect it to work exacly as the
  example 1. But only the rules from <code>class_1</code> are applied. I've written
  <code>&lt;div class="class_1 class_2"&gt;</code> and I expect that the rules from <code>class_1</code>
  will be applied and then they will be changed by <code>class_2</code>.</p>
  
  <p>Why does this happen? What is the rule that makes css work this way?</p>