title: Specificity of Nested CSS Selectors
body: <p>I am trying to figure out why "Item One" does not show as orange, below. According to specificity rules, the selector <code>.one.two</code>, should have a specificity score of 20 (two classes). <code>.one li</code> should have 11 (one class, one element). So it feels like it should show as orange, not blue.</p>
  
  <p>Any idea why it doesn't?</p>
  
  <p>Also, as a side question, why can't I have a space between the <code>.one</code> and the <code>.two</code> in the <code>.one.two</code> selector? That works for Chrome it seems, but not <a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_sel_element_pluss" rel="nofollow">here</a>.</p>
  
  <p><a href="https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/" rel="nofollow">Link to specificity calculations</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;style&gt;
      .one {
        color: red;
      }
      .two {
        color: green;
      }
      .one li {
        color: blue;
      }
      .one.two {
        color: orange;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div&gt;
      &lt;ul class="one two"&gt;
        &lt;li&gt;Item One&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>