Селектор p ~ ul у CSS — усі наступні сусіди елемента

HTML

<ul><li>Список перед абзацом — без змін.</li></ul>
<p>Абзац.</p>
<ul><li>Список після абзацу — червоний.</li></ul>
<div>Між ними може стояти будь-що.</div>
<ul><li>І цей червоний: ~ бачить усіх наступних братів.</li></ul>

CSS

p ~ ul {
    background: #ff0000;
}

HTML

<h4 class="cap">1. Тильда бере всіх наступних, плюс — тільки одного</h4>
<div class="box demo">
    <p>перший абзац — не збігся з жодним правилом</p>
    <p>другий абзац</p>
    <span class="mid">а це спан між абзацами</span>
    <p>третій абзац</p>
    <p>четвертий абзац</p>
</div>
<p class="note">Зелена рамка — <code>p ~ p</code>, синій підкреслений фон —
    <code>p + p</code>. Третій абзац зелений, але не синій: перед ним стоїть
    спан, тож «рівно наступним» для абзацу він уже не є.</p>

<h4 class="cap">2. Брати мають бути братами</h4>
<div class="box">
    <div class="parent">
        <p class="inner">Цей абзац ВСЕРЕДИНІ блока. Правило
            <code>.parent ~ p</code> його не бачить.</p>
    </div>
    <p class="inner">А цей — брат блока, і саме він почервонів.</p>
</div>

<h4 class="cap">3. Перемикач без жодного рядка js</h4>
<div class="box switcher">
    <input type="checkbox" id="sw">
    <label for="sw">показати подробиці</label>
    <p class="hint">Прапорець, підпис і панель — три брати поспіль.</p>
    <div class="panel">
        <p>Панель відкрилася правилом <code>#sw:checked ~ .panel</code>.
            Між прапорцем і панеллю стоять ще два елементи, і тильді це
            байдуже — плюс тут не спрацював би.</p>
    </div>
</div>

CSS

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

.demo p + p {
    background: #dbe6f5;
    border-bottom: 2px solid #2f6fd0;
}

.parent ~ p {
    color: #b23a3a;
    font-weight: 700;
}

.parent {
    padding: 4px 12px;
    border: 1px dashed #b9c6d8;
    border-radius: 4px;
}

.switcher .panel {
    max-height: 0;
    overflow: hidden;
    padding: 0 12px;
    border-radius: 4px;
    background: #edf9ef;
    transition: max-height .2s;
}

.switcher #sw:checked ~ .panel {
    max-height: 200px;
    padding: 4px 12px;
}

.switcher label {
    cursor: pointer;
    text-decoration: underline dotted;
}

.hint {
    color: #5a6472;
    font-size: .85em;
}

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

.mid {
    display: block;
    margin: 6px 0;
    color: #5a6472;
    font-size: .9em;
}

.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;
}