title: CSS specificity: Why isn't CSS specificity weight of 10 or more class selectors greater than 1 id selector?
body: <p>While going through the css specificity concept, I understood the fact that it is calculated as a 4 parts </p>
  
  <pre><code>1) inline (1000)
  2) id     (100)
  3) class   (10)
  4) html elments (1)
  </code></pre>
  
  <p>CSS with the highest rule will be applied to the corresponding element. </p>
  
  <p>I tried the following example </p>
  
  <p>Created more than 10 classes </p>
  
  <pre><code>&lt;div class="a1"&gt; ....
       &lt;div class="a13" id="id1"&gt; TEXT COLOR
       &lt;/div&gt; ... 
  &lt;/div&gt;
  </code></pre>
  
  <p>and the css as </p>
  
  <pre><code>.a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11 .a12 .a13 {
      color : red;
  }
  #id1 {
      color: blue;
  }
  </code></pre>
  
  <p>Now, even though in this case there are 13 classes the weight is 130. Which is greater than the id.</p>
  
  <p>Result -> <a href="http://jsfiddle.net/Dp9CX/" rel="noreferrer">JSFiddle CSS specificity</a></p>