Спрячьте .gif, если он находится рядом с другим .gif

У меня есть служба, где люди могут загружать свои изображения, и я показываю их на своем веб-сайте. Я хочу автоматически скрыть .gif, если он загружен рядом с другим .gif.

Я не хочу, чтобы это создавало изображения, заканчивающиеся на .png или .jpg.. only .gifs.

Вот пример изображения.

Если в строке есть три .gifs, отобразите только первый.

Я попытался выбрать его и спрятать, но это не работает вообще.

img > .gif{
    display:none;
}

Нужно ли использовать JavaScript или jQuery для достижения этого?

Ответ 1

Вы можете сделать это с помощью чистого CSS - нет необходимости в Javascript/jQuery!

Используйте комбинацию селектора атрибутов и прямого смежного комбинатора: + ¹

Это установит display:none; на любом gifs сразу после a .gif. Поэтому не более двух .gifs будут появляться рядом друг с другом.

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

jsFiddle здесь!

¹_{Использование селектора атрибутов и прямого смежного комбинатора не поддерживается полностью по IE8 и вниз.}

Ответ 2

Просто напишите:

.gif + .gif {
    display: none;
}

Ответ 3

Вы можете использовать ответ @Tomzan для CSS Selector: Element + Element (я не могу комментировать из-за низкой репутации) [http://www.w3schools.com/cssref/sel_element_pluss.asp]:

.gif + .gif { display: none; }

ИЛИ без специального класса @yours CSS (http://www.w3schools.com/cssref/sel_attr_contain.asp):

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

Из W3c для всех CSS-селекторов этого ответа:

Примечание. Для того, чтобы элемент element + работал в IE8 и ранее,! DOCTYPE > должен быть объявлен.

UPDATE Первый, используя классы CSS, будет работать для IE7: http://msdn.microsoft.com/en-us/library/ie/aa358818(v=vs.85).aspx