0

Is there are way in CSS to target every p preceding a div.carrots? In this case we would get Munch but not Burp.

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

<p>Burp!</p>
<div class="potatoes">
</div>
Jumbalaya Wanton
  • 1,601
  • 1
  • 25
  • 47
  • The specification at http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors has a list of all the selectors. It should be easy to see that what you want isn't in the list. – Barmar Dec 17 '13 at 01:51
  • Oops, that was CSS2. Here's CSS3: http://www.w3.org/TR/css3-selectors/#selectors – Barmar Dec 17 '13 at 01:52

1 Answers1

0

There is no "previous sibling" selector. Only The adjacent and general combinators, which require the target sibling to be after the first.

In order to select <p> in this case, you can surround the contents with some element (say, .container and use .container p:first-child as the selector. I don't think things would be all that different if you did this either:

<div class=carrots>
    <p>Munch Munch!</p>
    <div>
    </div>
</div>
Explosion Pills
  • 188,624
  • 52
  • 326
  • 405