title: Do parent selectors take precedence over child selector in CSS?
body: <p>I had a question about how CSS selectors work between parent and children, and which one would take precedence over the other.</p>
  
  <pre><code>&lt;div class="red"&gt;
    &lt;div class="blue"&gt;
      &lt;div class="green"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If you then have </p>
  
  <pre><code>   .red .green{
      border: 1px solid red;
      }
  
      .blue .green{
      border: 1px solid blue;
      }
  </code></pre>
  
  <p>Which one would take effect? And to override a CSS style does it have to be as specific a selector as the one you're trying to override?</p>