Селектор div > p у CSS — тільки прямі нащадки елемента

HTML

<div>
    <p>p — дитина div: жовтий.</p>
    <section>
        <p>p усередині section: не безпосередня дитина div — без змін.</p>
    </section>
</div>
<p>p поза div — без змін.</p>

CSS

div > p {
    background-color: yellow;
}

HTML

<h4 class="cap">1. <code>div p</code> — нащадок на будь-якій глибині</h4>
<div class="wrap w1">
    <div class="d">
        <p>прямий абзац</p>
        <section><p>абзац через section — теж збіг</p></section>
    </div>
    <p>абзац поруч із div, не всередині</p>
</div>

<h4 class="cap">2. <code>div &gt; p</code> — лише пряма дитина</h4>
<div class="wrap w2">
    <div class="d">
        <p>прямий абзац — збіг</p>
        <section><p>абзац через section — уже НЕ збіг</p></section>
    </div>
    <p>абзац поруч із div</p>
</div>

<h4 class="cap">3. <code>div + p</code> — рівно наступний сусід</h4>
<div class="wrap w3">
    <div class="d"><p>усередині</p></div>
    <p>перший абзац після div — збіг</p>
    <p>другий абзац після div — уже ні</p>
</div>

<h4 class="cap">4. <code>div ~ p</code> — усі наступні сусіди</h4>
<div class="wrap w4">
    <div class="d"><p>усередині</p></div>
    <p>перший абзац після div</p>
    <p>другий абзац після div — теж збіг</p>
</div>

CSS

.wrap {
    max-width: 560px;
    margin-bottom: 6px;
    padding: 10px 14px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.wrap .d {
    padding: 6px 12px;
    border: 1px dashed #b9c6d8;
    border-radius: 4px;
    background: #fff;
}

.wrap p {
    margin: 8px 0;
}

.w1 div p {
    outline: 3px solid #3a9a4f;
    outline-offset: 2px;
}

.w2 div > p {
    outline: 3px solid #2f6fd0;
    outline-offset: 2px;
}

.w3 div + p {
    outline: 3px solid #d1a04a;
    outline-offset: 2px;
}

.w4 div ~ p {
    outline: 3px solid #b23a3a;
    outline-offset: 2px;
}

.cap {
    margin: 24px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}