it-swarm.com.ru

Маржа на каждом элементе, кроме последнего

У меня есть 2 строки CSS для установки полей для каждого элемента, кроме последнего. Есть ли способ объединить его в 1 строку?

Вот что у меня сейчас (работает):

.work img {
    margin-right: 10px;
}

.work img:last {
    margin-right: 0px;
}

Я попытался изменить его на:

.work img:not(:last) {
    margin-right: 10px;
}

Но это не работает? Есть идеи почему?

UPDATEУ меня только пять изображений. Мой другой вариант будет иметь поля только на первых четырех.

14
user4756836

У вас небольшая ошибка

Правка:

.work img:not(:last)

в

.work:not(:last-child)

Проверить Fiddle Здесь.

15
ketan

Попробуй это :

.work img {
    margin-right: 10px;
}

.work img:last-child {
    margin-right: 0px;
}

или же

.work img:not(:last-child) {
    margin-right: 10px;
}

или решение jQuery:

jQuery('.work img:not(:last)').css({marginRight: 10);

Помните, ваш браузер должен иметь поддержку селектора, если вы применяете чистый CSS.

Смотрите это для справки: http://caniuse.com/#search=%3Alast-child

0
Redy S

Если вам нужна полная поддержка браузера, я бы предложил использовать некоторый javascript или добавить класс .last на последнем img. В противном случае вы могли бы просто сделать:

.work img:last-child {
  margin: 0;
}
0
Sean Stopnik