title: How does specificity work with inherited styles?
body: <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class='container'&gt;
    &lt;p&gt;foo&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.container {
    color: red;
  }
  
  p {
    color: blue
  }
  </code></pre>
  
  <p><a href="http://codepen.io/anon/pen/YyqBmE?editors=110" rel="noreferrer">Code Pen</a></p>
  
  <hr>
  
  <p>The applied color is blue. Why is this? I was thinking that since <code>.container</code> has more specificity than <code>p</code>, the color would end up being red.</p>
  
  <p>What is happening here? Why is it blue?</p>
  
  <p>My hypothesis is that the process is "Does <code>p</code> have any selectors? If so use it and don't look up for <code>.container</code>. If it didn't have any styles, it'd look up and use the style for <code>.container</code>."</p>