CSS targeting elements before image

Question

In my wordpress post I have image and text mixed. I have the following code which targets content right AFTER an image to apply specific css.

#single-pg p{padding:0 20px; margin-top:0;}

#single-pg img + p{ margin-top:30px; background:red;}

#single-pg img + h1{ background:blue;}

#single-pg img + blockquote{ background:orange;}

I want to be able to do similar with content BEFORE an image (ex. apply margin-bottom: 30px to p) but only when its the last element before an image

Targeting its parent I don't think would solve the issue. I just want to target whatever element comes just before the image, I just cannot pre-determine what that is

In short: you can't, at least not with just CSS. You can go deeper (form parent to child), but not the other way; you can go to the next, but not the previous. — domsson, Jul 05 '17 at 20:10
Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — sorayadragon, Jul 05 '17 at 20:15

score 1 · Accepted Answer · answered Jul 05 '17 at 21:12

1

You can't target a previous element, but as a workaround (if margins is what you want) you could apply the margin to the img if it follows a p

#single-pg p + img{margin-top:30px;}

answered Jul 05 '17 at 21:12

Gabriele Petrioli

191,379
34
261
317

That's a good idea, just this way has a lot of classes to apply 'just in case' since there's different elements that could be before and after an img – user3550879 Jul 05 '17 at 21:22
Indeed, you would have to use `,` to combine selectors or if you want it to have a margin when anything is before the image you could use `*` instead of `p`. – Gabriele Petrioli Jul 05 '17 at 21:24
I haven't used * often enough to understand them well, how would that look? – user3550879 Jul 05 '17 at 21:59
`*` means any tag. so `#single-pg * + img{..}` would target the `img` if it had any element before it (*if it was not the first child of its parent*) – Gabriele Petrioli Jul 05 '17 at 22:01
Oh ok cool thanks! can it work as #single-pg img + * for the top? – user3550879 Jul 05 '17 at 22:03

CSS targeting elements before image

1 Answers1