CODEWITHSUNDEEP
javascripthtmlcsscss-selectors
user2796328
user2796328

Reputation:

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?

Upvotes: 16

Views: 776

Answers (3)

Marcos Lima
Marcos Lima

Reputation: 483

You could use @Tomzan 's answer for CSS Selector: Element + Element (I cannot comment because of low reputation) [http://www.w3schools.com/cssref/sel_element_pluss.asp]:

.gif + .gif { display: none; }

OR without a custom class @ yours CSS (http://www.w3schools.com/cssref/sel_attr_contain.asp): 

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

From W3c for all CSS selectors of this answer:

Note: For element+element to work in IE8 and earlier, a < !DOCTYPE> must be declared.

UPDATE The first, using CSS classes would work for IE7: http://msdn.microsoft.com/en-us/library/ie/aa358818(v=vs.85).aspx

Upvotes: 1

Tomzan
Tomzan

Reputation: 2818

Just write: 

.gif + .gif {
    display: none;
}

Upvotes: 10

Josh Crozier
Josh Crozier

Reputation: 241178

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.

Upvotes: 32

Related Questions