.parent .child vs .parent > .child css selector

Introduction

The .parent .child selector

The .parent > .child selector

After words

styles.css

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 1.5rem;
    color: #fff;
}
.parent .child {
    background: darkblue;
    margin: 1rem;
}
.parent>.child {
    background: brown;
}

index.html

<div class="parent">
    <div class="child">This is brown</div>
    <div class="one">
        <div class="child">This is yellow</div>
    </div>
</div>

<div class="parent">
    <div class="one">
        <div class="child">Why is thid yellow?</div>
    </div>
</div>