CSS select element which does not follow element

Question

I want to select all P's which do not follow a H3 or a P so:

<img>

<p> this is selected</p>

<p> this is not</p>

<p> this is not</p>

<span>

<p> this is selected</p>

<h3>

<p> this is not</p>

I tried

p + :not(h3, p) and :not(h3, p) + p

but they do not work

what is the solution? Please help

You would be better off by not using a single selector for this. A big portion of browsers would not support such an advanced selector so my advice is to group and `
` and `
` elements into `
` tags and then apply a class to them. This way you can target elements before and after the block. — matsko, Nov 03 '12 at 19:59
I only want to text indent the selected elements, its more of a progressive enhancement then a site breaking thing. If it was any properties, I would have done something different. — Ozzy, Nov 03 '12 at 20:06
@Ozzy, it is then simpler (and more cross-browser) to set first the text indent on `p` in general, then override it with a rule that applies to `p` elements that follow certain elements. — Jukka K. Korpela, Nov 03 '12 at 20:10

score 5 · Accepted Answer · answered Nov 03 '12 at 20:03

5

You can express that, as css selector, this way:

*:not(h3):not(p) + p

See working demo

answered Nov 03 '12 at 20:03

Nelson

49,283
8
68
81

It's not necessary, I added it to better express what the selector does. – Nelson Nov 03 '12 at 20:10
1

As a quick aside, one of the solutions from the question, `:not(h3, p) + p` will work in jQuery, and is tentatively specced into Selectors 4, but won't work in browsers that currently implement Selectors 3. See http://stackoverflow.com/questions/10711730/whats-the-difference-in-the-not-selector-between-jquery-and-css And of course, there's also the potential issue of browser support. – BoltClock Nov 03 '12 at 20:14
If you need to select the `p` if it's the first child, just add that to the selector so you have both of them: `p:first-child, :not(h3):not(p) + p`. – BoltClock Nov 04 '12 at 18:35

score 0 · Answer 2 · answered Nov 03 '12 at 20:08

0

:not(h3):not(p) + p {
    ...
}

answered Nov 03 '12 at 20:08

John Kurlak

6,594
7
43
59

Nelson was first. See his answer. – John Kurlak Nov 03 '12 at 20:08

score -1 · Answer 3 · answered Nov 03 '12 at 19:59

Use classes like this...

<img>
<p class="sel"> this is selected</p>
<p> this is not</p>
<p> this is not</p>
<span>
<p class="sel"> this is selected</p>
<h3>
<p> this is not</p>

Then in your CSS you can modify them with...

.sel {
   /* Styling here */
}

CSS select element which does not follow element

` and `

3 Answers3