Margine su ogni elemento tranne l'ultimo

Question

Ho 2 righe di CSS per impostare il margine su ogni elemento tranne l'ultimo. C'è un modo per combinarlo in 1 linea?

Questo è quello che ho attualmente (di lavoro):

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

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

Ho provato a cambiare a:

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

Ma non sta funzionando? Qualche idea del perché?

UPDATE Ho solo cinque immagini. La mia altra opzione sarebbe di avere margini solo sui primi quattro.

Answer 1

Hai piccolo errore

Cambio:

.work img:not(:last) 

a

.work:not(:last-child) 

check Fiddle Here.

Answer 2

Prova questo:

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

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

o

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

o soluzione jQuery:

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

Ricordate, il vostro bisogno di avere il supporto del browser per selettore se si applica puro CSS.

Vai a questa per riferimento: http://caniuse.com/#search=%3Alast-child

Answer 3

Se avete bisogno di supporto completo del browser, vi suggerirei di usare un po 'di javascript, o l'aggiunta di una classe di .last sull'ultimo IMG. In caso contrario, si può solo fare:

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