Do parent selectors take precedence over child selector in CSS?

Question

I had a question about how CSS selectors work between parent and children, and which one would take precedence over the other.

<div class="red">
  <div class="blue">
    <div class="green">
    </div>
  </div>
</div>

If you then have

   .red .green{
    border: 1px solid red;
    }

    .blue .green{
    border: 1px solid blue;
    }

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?

Answer 1

You should read up on specificity.

To answer your immediate question, all your selectors carry the same specificity, so in the case of .green, the last rule takes precedence: your border would be blue.