Предыдущий смежный селектор в CSS

Есть ли способ в CSS ориентироваться на каждый p, предшествующий div.carrots? В этом случае мы получили бы Мунк, но не Burp.

<p>Munch Munch!</p>
<div class="carrots">
</div>

<p>Burp!</p>
<div class="potatoes">
</div>

Ответ 1

Нет селектора "предыдущий брат". Только смежные и общие комбинаторы, которые требуют, чтобы целевой брат был после первого.

Для выбора <p> в этом случае вы можете окружать содержимое каким-то элементом (например, .container и использовать .container p:first-child как селектор. Я не думаю, что все будет по-другому, если вы сделал это:

<div class=carrots>
    <p>Munch Munch!</p>
    <div>
    </div>
</div>