Select element not followed by another

Question

I need to be able to select an HTML p tag , ONLY if it is not followed by another div element with particular class. For example, I will need to select this P

<div id="myContainer">
    <p>...</p>
    <div>...</div>
</div>

but not this, because it is followed by a div with class="red".

<div id="myContainer">
    <p>...</p>
    <div class="red">...</div>
</div>

Here's what I'm attempting:

#myContainer > p ~ div:not(.step) 

Answer 1

You can't use CSS to target previous elements, but based on your HTML structure you can use immediate sibling selector.

CSS:

.myContainer p + div:not(.red)   {
   border: 1px solid #000;
}

HTML:

<div class="myContainer">
    <p>...</p>
    <div>...</div>
</div>
<div class="myContainer">
    <p>...</p>
    <div class="red">...</div>
</div>

DEMO http://jsfiddle.net/92VVZ/