Hide a .gif if it is beside another .gif

I have a service where people can upload their images, and I display them on my website. I want to automatically hide a .gif if it is uploaded beside another .gif.

I don’t want this to effect images ending in .png or .jpg.. only .gifs.

Here is an image example..

enter image description here

If there are three .gifs in a row, only display the first one.

I have tried selecting it, and hiding it, but this doesn’t work at all.

img > .gif{ display:none; }

Do I need to use JavaScript or jQuery to achieve this?


solution

You can do this using pure CSS - no Javascript/jQuery needed!

Use a combination of the attribute selector and the direct adjacent combinator: +1

This will set display:none; on any gifs immediately following a .gif. Therefore no more than two .gifs will ever appear beside each other.

img[src$=".gif"] + img[src$=".gif"] { display:none; }

jsFiddle demo here!


1Usage of the attribute selector and direct adjacent combinator are not fully supported by IE8 and down.