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

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

Это то, что у меня есть в настоящее время (работает):

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

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

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

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

Но это не работает? Любая идея почему?

ОБНОВЛЕНИЕ У меня всего пять изображений. Мой другой вариант состоял бы в том, чтобы иметь только поля в первых четырех.

Ответ 1

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

Изменить:

.work img:not(:last)

.work:not(:last-child)

Проверьте скрипт здесь.

Ответ 2

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

.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

Ответ 3

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

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