Я пытаюсь расширить старый трюк 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 или более, я хочу запятую после второго-последнего элемента. Для списков из двух я не хочу запятой.