Селектор 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. Глибина не має значення</h4>
<div class="box deep">
    <p>абзац просто в блоці</p>
    <section><article><div>
        <p>абзац на четвертому щаблі вкладеності — той самий збіг</p>
    </div></article></section>
</div>
<p class="note">Зелена рамка — <code>.deep p</code>. Синій пунктир —
    <code>.deep &gt; p</code>: він дістав лише перший абзац.</p>

<h4 class="cap">2. Пробіл, якого не видно</h4>
<div class="box">
    <div class="a b">На цьому елементі обидва класи: <code>class="a b"</code></div>
    <div class="a">
        <span class="b">А це елемент із класом <code>b</code> ВСЕРЕДИНІ
            елемента з класом <code>a</code></span>
    </div>
</div>
<p class="note">Червона рамка — правило <code>.a.b</code> без пробілу,
    зелена — <code>.a .b</code> з пробілом. Різні елементи.</p>

<h4 class="cap">3. Чому <code>table &gt; td</code> не працює</h4>
<div class="box">
    <table>
        <tr><td>комірка</td><td>ще комірка</td></tr>
    </table>
</div>
<p class="note">У розмітці вище немає <code>&lt;tbody&gt;</code> — його дописав
    браузер. Тому комірка збіглася з <code>table td</code> (жовте тло) і з
    <code>table &gt; tbody &gt; tr &gt; td</code> (зелена рамка), але не з
    <code>table &gt; td</code>, яке пофарбувало б їх у червоне.</p>

CSS

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

.deep > p {
    border-bottom: 2px dashed #2f6fd0;
}

.a.b {
    outline: 3px solid #d64545;
    outline-offset: 2px;
}

.a .b {
    outline: 3px solid #3a9a4f;
    outline-offset: 2px;
}

table td {
    background: #fff3d6;
}

table > tbody > tr > td {
    outline: 2px solid #3a9a4f;
    outline-offset: -3px;
}

table > td {
    background: #d64545;
    color: #fff;
}

table {
    border-collapse: collapse;
}

td {
    padding: 6px 12px;
    border: 1px solid #b9c6d8;
}

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

.box > div {
    margin: 8px 0;
    padding: 6px 10px;
    border: 1px dashed #b9c6d8;
    border-radius: 4px;
}

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

.note {
    max-width: 560px;
    color: #5a6472;
    font-size: .9em;
}

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