Списки с разделителями-запятыми с помощью CSS-я хочу Оксфордскую запятую!

Я пытаюсь расширить старый трюк CSS до новых длин, принимая во внимание зловещее будущее Оксфордская запятая. Мне нравится Оксфордская запятая. Я хочу, чтобы мои встроенные списки использовали его. То есть

Мне нужен этот html

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

чтобы показать это:

apple, orange, & banana

Теперь я могу заставить его отображаться как

apple, orange & banana

используя этот 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: " & ";
}

но проблема заключается в том, что мы не можем просто изменить этот последний оператор на content: ", & ", потому что списки только с двумя будут выглядеть глупо. Как

I like to eat apples, & bananas

Итак, для списка из 3 или более, я хочу запятую после второго-последнего элемента. Для списков из двух я не хочу запятой.

Ответы

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