Add Margin-bottom To Image Before Footer

I'm trying to see if there's a way to add a margin-bottom to an img element only if it's followed by a footer element. At the moment I'm using a special class (image-before-footer)

Solution 1:

Since you can't select previous sibling elements in CSS, why not just add a margin-top to the footer element if it follows an img element using the adjacent sibling combinator, +:

Example Here

img + footer {
  margin-top: 3em;
}

---

You could also just select the lastimg element using the :last-of-type pseudo class.

Of course, this assumes that the last img element will be succeeded by the footer, though.

Example Here

img:last-of-type {
    margin-bottom: 3em;
}

Solution 2:

you could try last-of-type pseudo element:

img:last-of-type {
margin-bottom: 3em;
}

Solution 3:

You can use adjacent sibling selector for that. It will select only the specified element that immediately follows the former specified element.

former_element + target_element { style properties }

Base on your code, the syntax would be:

img + footer {
    margin-top: 3em;
}

Solution 4:

Try this:

http://jsfiddle.net/isqware/g4hxw97m/

HTML

<divclass="container"><h1>Title goes here</h1><article>Lorem.</article><imgsrc="https://ununsplash.imgix.net/photo-1421284621639-884f4129b61d?dpr=1.80&fit=crop&fm=jpg&h=700&q=75&w=1050"/><article>Lorem.</article><imgclass=""src="https://ununsplash.imgix.net/photo-1421284621639-884f4129b61d?dpr=1.80&fit=crop&fm=jpg&h=700&q=75&w=1050"/><footerclass="footer"><p>Here are my footnotes</p></footer></div>

CSS

article {
margin: 3em0;
}

img {
width: 100%;
vertical-align: middle;
margin: 0;
}

.image-before-footer {
 margin-bottom: 3em;
} 
.footer{
background:#000;
width:100%;
min-height:100px;
}

Jquery

$( "footer.footer" ).prev('img').addClass( "image-before-footer" );

I hope it works. Check the JSFiddle example.

Cheers