title: Why can't I beat an ID with multiple classes?
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/2809024/points-in-css-specificity">Points in CSS specificity</a>  </p>
  </blockquote>
  
  
  
  <p>Here's an example of what I mean:</p>
  
  <p><a href="http://jsfiddle.net/BTJXt/9/" rel="nofollow noreferrer">http://jsfiddle.net/BTJXt/9/</a></p>
  
  <p>Somehow 1 ID will beat a seemingly infinite number of classes.  How is this being calculated?</p>
  
  <pre><code>&lt;style&gt;
      div {
      height:200px;
      width:200px;
      }
  
      #big .little {
      /* Specificy value = 110 */
      background-color:red;
      }
  
       #big .little.little {
      /* Specificy value = 120 */
      background-color:blue;
      }
  
      .little.little.little.little.little.little.little.little.little.little.little.little.little {
      /* Specificy value = 130, why doesn't this win? */
      background-color:green;
      }
  
  
  &lt;/style&gt;   
  
  &lt;div id="big"&gt;
      &lt;div class="little"&gt;&lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>