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

Question

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

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

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

Answer 1

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

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

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