title: Is the specificity in CSS3 different than in CSS2.1?
body: <p>I have been reading up on specificity these days, and I find confusing some claims from the websites, especially from one which I find quite relevant (as far as other CSS materials go).</p>
  
  <p>On this website <a href="http://css-tricks.com/specifics-on-css-specificity/" rel="nofollow">http://css-tricks.com/specifics-on-css-specificity/</a> at the beginning of website author explains following:</p>
  
  <pre><code>&lt;ul id="summer-drinks"&gt;
     **&lt;li class="favorite"&gt;Whiskey and Ginger Ale&lt;/li&gt;**
     &lt;li&gt;Wheat Beer&lt;/li&gt;
     &lt;li&gt;Mint Julip&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Now you pop open your CSS and do your styling for your new class:</p>
  
  <pre><code>.favorite {
    color: red;
    font-weight: bold;
  } 
  </code></pre>
  
  <p>So the <code>&lt;li&gt;</code> tag with the class of favorite judging by the author shouldn't be red and bold as the class claims because the id <code>summer-drinks</code> is more specific the favorite class. But when I put this code I get the opposite result, <code>&lt;li&gt;</code> class with the favorite class is really bold and red? Always when I target child element who is inside of parent element who is more specific then the child element I get child styles as a result? </p>
  
  <p>How is this happening? Does it have anything to do with the fact that I am using HTML Doctype and, therefore, CSS3 differs from CSS2.1? </p>