<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.