Селектор div, p — одне правило для кількох елементів

HTML

<h1>Заголовок — жовтий</h1>
<p>Абзац — жовтий.</p>
<div>div у переліку немає — без змін.</div>

CSS

h1, p {
    background-color: yellow;
}

HTML

<h4 class="cap">1. Кома — це «або», пробіл — це «всередині»</h4>
<div class="pair">
    <div class="box b1">
        <p class="lbl"><code>div, p</code></p>
        <div>блок div</div>
        <p>абзац поруч</p>
        <div><p>абзац усередині блока</p></div>
    </div>
    <div class="box b2">
        <p class="lbl"><code>div p</code></p>
        <div>блок div</div>
        <p>абзац поруч</p>
        <div><p>абзац усередині блока</p></div>
    </div>
</div>

<h4 class="cap">2. Одна хибна ланка вбиває весь блок</h4>
<div class="box">
    <p id="alive">Це правило написане окремо — зелена рамка на місці.</p>
    <p id="dead">А це правило перелічене разом із неіснуючим псевдокласом —
        рамки немає взагалі, і самого правила теж.</p>
</div>

<h4 class="cap">3. Вага: кома, <code>:is()</code> і <code>:where()</code></h4>
<ul class="box">
    <li class="w1">кома: ланка важить сама за себе — перемагає пізніше правило класу</li>
    <li class="w2">:is(): береться найбільша вага з переліку — перемагає :is()</li>
    <li class="w3">:where(): вага нульова — перемагає будь-яке правило класу</li>
</ul>

<pre id="log"></pre>

CSS

/* 1 */
.b1 div,
.b1 p {
    background: #edf9ef;
    outline: 2px solid #3a9a4f;
}

.b2 div p {
    background: #edf9ef;
    outline: 2px solid #3a9a4f;
}

/* 2 — перше правило живе, друге зникає цілком через ланку, якої не існує */
#alive {
    outline: 3px solid #3a9a4f;
}

#dead,
:bogus-pseudo {
    outline: 3px solid #3a9a4f;
}

/* 3 — три способи об'єднати селектори і три різні ваги */
#nikoly-ne-zbihajetsia,
.w1 {
    color: #d64545;
}

.w1 {
    color: #29713a;
}

:is(#nikoly-ne-zbihajetsia, .w2) {
    color: #29713a;
}

.w2 {
    color: #d64545;
}

:where(#nikoly-ne-zbihajetsia, .w3) {
    color: #d64545;
}

.w3 {
    color: #29713a;
}

.pair {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.box {
    flex: 1 1 260px;
    max-width: 560px;
    padding: 8px 14px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.box li {
    margin: 8px 0;
}

.lbl {
    margin: 6px 0;
    color: #5a6472;
}

pre {
    max-width: 560px;
    margin-top: 14px;
    padding: 10px 14px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
    font-size: .85rem;
    white-space: pre-wrap;
}

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

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

JS

const log = document.getElementById('log');
const pysaty = (t) => { log.textContent += t + '\n'; console.log(t); };

// які правила взагалі дожили до таблиці стилів
const selektory = [...document.styleSheets].flatMap((s) => [...s.cssRules]).map((r) => r.selectorText);
pysaty('правил у таблицях стилів: ' + selektory.length);
pysaty('правило «#alive» на місці: ' + selektory.includes('#alive')); // → true
pysaty('правило «#dead, :bogus-pseudo» на місці: '
    + selektory.some((s) => s && s.includes('#dead'))); // → false — зникло цілком

// те саме в скриптах
try {
    document.querySelectorAll('p, :bogus-pseudo');
    pysaty('querySelectorAll("p, :bogus-pseudo") — без помилки');
} catch (e) {
    pysaty('querySelectorAll("p, :bogus-pseudo") -> ' + e.name); // → SyntaxError
}
pysaty('querySelectorAll(":is(p, :bogus-pseudo)") -> знайдено '
    + document.querySelectorAll(':is(p, :bogus-pseudo)').length + ' елементів'); // → знайдено 8

// пробіли навколо коми нічого не важать — переглядач нормалізує запис
const proba = document.createElement('style');
proba.textContent = 'h1 ,   h2,h3 { color: red } strong, { color: red } b,, i { color: red }';
document.head.append(proba);
pysaty('із трьох правил проби вижило: ' + proba.sheet.cssRules.length
    + ' -> ' + [...proba.sheet.cssRules].map((r) => JSON.stringify(r.selectorText)).join(', '));
// → із трьох правил проби вижило: 1 -> "h1, h2, h3"
proba.remove();

// підсумок ваги: зелений колір означає «перемогло очікуване правило»
for (const klas of ['.w1', '.w2', '.w3']) {
    pysaty(klas + ' -> ' + getComputedStyle(document.querySelector(klas)).color);
}
// → .w1 -> rgb(41, 113, 58)   кома: ланка .w1 важить як клас, пізніше правило перемогло
// → .w2 -> rgb(41, 113, 58)   :is() узяв вагу ідентифікатора й переміг сам
// → .w3 -> rgb(41, 113, 58)   :where() важить нуль, тому переміг звичайний клас