अंतिम

Question

को छोड़कर प्रत्येक तत्व पर मार्जिन मेरे पास पिछले तत्व को छोड़कर हर तत्व पर मार्जिन सेट करने के लिए सीएसएस की 2 पंक्तियां हैं। क्या इसे 1 लाइन में गठबंधन करने का कोई तरीका है?

यह वही मैं वर्तमान में (काम) है:

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

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

मैं करने के लिए इसे बदलने की कोशिश की:

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

लेकिन यह काम नहीं कर रहा? कोई विचार क्यों?

अद्यतन मेरे पास केवल पांच छवियां हैं। मेरा दूसरा विकल्प केवल पहले चार पर मार्जिन होगा।

Answer 1

आप छोटी सी गलती

बदलें है:

.work img:not(:last) 

को

.work:not(:last-child) 

चेक Fiddle Here.

Answer 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); 

याद रखें, चयनकर्ता के लिए समर्थन के लिए अपने ब्राउज़र की जरूरत है, तो आप शुद्ध सीएसएस लागू होते हैं।

संदर्भ के लिए इस देखें: http://caniuse.com/#search=%3Alast-child

Answer 3

आप पूर्ण ब्राउज़र समर्थन की जरूरत है, मैं कुछ जावास्क्रिप्ट का उपयोग कर, या अंतिम img पर .last के एक वर्ग को जोड़ने का सुझाव देते हैं। नहीं तो आप सिर्फ कर सकता है:

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