CSS Child Combinator (>) Selector - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Selects only direct child <p> elements of .parent */
.parent > p {
    color: white;
    background-color: teal;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
}

/* This will not be applied because it's not a direct child */
.parent p p {
    color: red;
}</style></head><body><div class="parent">
        <p>Direct child paragraph 1</p>
        <p>Direct child paragraph 2</p>
        <div>
            <p>Nested paragraph (not direct child)</p>
        </div>
    </div></body></html>