<main>
  <div class="quarter-finals">
    <div class="semi-finals">
      <div class="final">
        <div class="champion"></div>
        <div class="runner-up"></div>
      </div>
    </div>
  </div>
</main>
main * {
  display: flex;
  padding: 1rem;
  border: 1px dotted green;
}

.quarter-finals div {
  background: black;
}

.quarter-finals > div {
  background: red;
}

.champion + div {
  background: yellow;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.