listas delimitadas por comas con CSS: ¡quiero una Oxford Comma!

Question

Estoy tratando de extender un old CSS trick a nuevas longitudes, teniendo en cuenta el siniestro futuro de the Oxford Comma. Me gusta la Oxford Comma. Quiero que mis listas en línea lo usen. Es decir,

Me gustaría que esta html

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

a aparecer como la siguiente:

apple, orange, & banana 

---

Ahora, puedo conseguir que se muestran como

apple, orange & banana 

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

pero el problema , se ve, es que no podemos simplemente cambiar esta última afirmación a content: ", & " porque las listas con sólo dos artículos se verá estúpida. Al igual que

I like to eat apples, & bananas 

---

Así que para una lista de 3 o más, quiero una coma después de la segunda a la última elemento. Para listas de dos, no quiero coma.

Answer 1

añadí esta regla adicional, que parece hacer lo que quiera:

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

Answer 2

no tengo la reputación suficiente para dejar comentarios todavía, pero tengo algo que compartir que creo que es útil.

Hice una demostración de JSfiddle de la versión mejorada de chadoh de Taze T. Schnitzel's answer. También incluí y comenté la respuesta original de Taze y el primer intento de respuesta de chadoh. Aquí está la demostración: http://jsfiddle.net/u7rzA/