Селектор елемента в CSS — вибір за іменем тега p або div

HTML

<p>Кожен абзац — жовтий.</p>
<p>І цей теж.</p>
<div>А div — без змін.</div>

CSS

p {
    background-color: yellow;
}

HTML

<h4 class="cap">1. Одне правило — усі абзаци, хоч би де вони лежали</h4>
<div class="box">
    <p>абзац верхнього рівня</p>
    <div><div><section><p>абзац на глибині трьох блоків — теж синій</p></section></div></div>
    <p class="special">абзац із класом: правило <code>.special</code> написане
        ВИЩЕ за правило <code>p</code>, і все одно перемогло</p>
    <p>А <b>жирний шматок</b> усередині абзацу — це вже інший теґ, і колір у
        нього свій, бо правило <code>p b</code> має два імені проти одного</p>
</div>

<h4 class="cap">2. Регістр: html байдуже, svg — ні</h4>
<div class="box">
    <P>Цей абзац написано ВЕЛИКИМИ буквами теґа — правило <code>p</code>
        його бере, бо html зводить імена до малих</P>
    <svg width="240" height="60" viewBox="0 0 240 60">
        <circle cx="30" cy="30" r="22"></circle>
        <rect x="70" y="8" width="44" height="44"></rect>
        <linearGradient id="g"></linearGradient>
        <text x="130" y="36">текст svg</text>
    </svg>
    <p class="note">Коло й прямокутник пофарбовано правилами <code>circle</code>
        і <code>rect</code>. Правило <code>lineargradient</code> малими буквами
        не збігається ні з чим — у svg ім'я теґа чутливе до регістру.</p>
</div>

<h4 class="cap">3. Що насправді робить зірочка</h4>
<div class="box all">
    <p>Кожна рамка нижче — окремий елемент, з яким збігся селектор <code>*</code>:</p>
    <ul><li>пункт <em>із виділенням</em></li><li>ще пункт</li></ul>
</div>

CSS

.special {
    color: #b23a3a;
}

p {
    color: #1d3a6b;
}

p b {
    color: #29713a;
}

circle {
    fill: #3a9a4f;
}

rect {
    fill: #d64545;
}

lineargradient {
    fill: #d64545;
}

text {
    font: 14px sans-serif;
    fill: #1d3a6b;
}

.all * {
    outline: 1px solid #d1a04a;
    outline-offset: 2px;
}

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

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

.note {
    font-size: .9em;
}

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