Search code examples
csscss-selectors

Select element not followed by another

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)
Solution

  • Is this what you mean? Then you're almost there.

    DEMO

    /* will select p not directly followed by div.red */
#myContainer > p + div:not(.red)