सीएसएस-आई के साथ कॉमा-सीमांकित सूचियां ऑक्सफोर्ड कॉमा चाहते हैं!

Question

मैं the Oxford Comma के भयानक भविष्य को ध्यान में रखते हुए, old CSS trick को नई लंबाई तक बढ़ाने का प्रयास कर रहा हूं। मुझे ऑक्सफोर्ड कॉमा पसंद है। मैं अपनी इनलाइन सूचियों का उपयोग करना चाहता हूं।

apple, orange, & banana 

---

अब, मैं यह

apple, orange & banana 

के रूप में दिखाने के लिए प्राप्त कर सकते हैं: यह

मैं इस एचटीएमएल

<ul id="taglist"> 
    <li>apple</li> 
    <li>orange</li> 
    <li>banana</li> 
</ul> 

चाहते हैं इस के रूप में दिखाने के लिए, है

इस सीएसएस का उपयोग करते हुए:

#taglist { 
    display: inline; 
    list-style: none; 
} 

#taglist li { 
    display: inline; 
} 

#taglist li:after { 
    content: ", "; 
} 

#taglist li:last-child:after { 
    content: ""; 
} 

#taglist li:nth-last-child(2):after { 
    content: " & "; 
} 

लेकिन समस्या, आप देखते हैं, कि हम बस केवल दो आइटम के साथ content: ", & " है कि पिछले बयान को बदल नहीं सकते क्योंकि सूचियों बेवकूफ दिखेगा।

तरह

I like to eat apples, & bananas 

---

तो 3 या उससे अधिक की एक सूची के लिए, मैं दूसरे करने के लिए पिछले तत्व के बाद एक अल्पविराम चाहते हैं। दो की सूचियों के लिए, मुझे कोई अल्पविराम नहीं चाहिए।

Answer 1

मैं इस अतिरिक्त नियम शामिल किया है, यह तुम क्या चाहते करने के लिए प्रकट होता है:

#taglist li:nth-last-child(3) ~ li:nth-last-child(2):after { 
    content: ", & "; 
} 

Answer 2

मैं अभी तक टिप्पणी छोड़ने के लिए पर्याप्त प्रतिष्ठा नहीं है, लेकिन मैं साझा करने के लिए मुझे लगता है कि उपयोगी है कुछ है।

मैंने Taze T. Schnitzel's answer के चाडो के बेहतर संस्करण का जेएसफ़िल्ड डेमो बनाया। मैंने टेज के मूल उत्तर और चाडो के जवाब में पहला प्रयास भी शामिल किया है और टिप्पणी की है। यहां डेमो है: http://jsfiddle.net/u7rzA/