elenchi delimitati da virgole con CSS-Voglio una virgola di Oxford!

Question

Sto tentando di estendere un old CSS trick a nuove lunghezze, tenendo conto del futuro sinistro di the Oxford Comma. Mi piace l'Oxford Comma. Voglio i miei elenchi in linea per usarlo. Cioè,

Vorrei che questo html

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

di presentarsi come questo:

apple, orange, & banana 

---

Ora, posso farlo per mostrare come

apple, orange & banana 

usando questo codice CSS:

#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: " & "; 
} 

ma il problema, si vede, è che non possiamo semplicemente cambiare l'ultima affermazione di content: ", & " perché le liste con solo due articoli saranno sembrare stupido. Come

I like to eat apples, & bananas 

---

Così, per un elenco di 3 o più, voglio una virgola dopo il secondo-a-ultimo elemento. Per gli elenchi di due, non voglio nessuna virgola.

Answer 1

Ho aggiunto questa regola in più, sembra di fare ciò che si vuole:

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

Answer 2

io non ho abbastanza reputazione da lasciare ancora commenti, ma ho qualcosa da condividere che credo sia utile.

Ho creato una demo di JSfiddle della versione migliorata di chadoh di Taze T. Schnitzel's answer. Ho anche incluso e commentato la risposta originale di Taze e il primo tentativo di risposta di Chadoh. Ecco la demo: http://jsfiddle.net/u7rzA/