CSS, 132 116 115 Bytes
a:not(:last-child):nth-child(n+2):after,a:nth-last-child(n+3):after{content:","}a+:last-child:before{content:"and "
<p>
<a>one</a>
</p>
<p>
<a>one</a>
<a>two</a>
</p>
<p>
<a>one</a>
<a>two</a>
<a>three</a>
</p>
<p>
<a>one</a>
<a>two</a>
<a>three</a>
<a>four</a>
</p>
a:not(:last-child):nth-child(n+2):after,a:nth-last-child(n+3):after{content:","}a+:last-child:before{content:"and "
CSS kommt im Code-Golf nicht allzu oft vor, weil es nur Text formatieren kann, aber es funktioniert tatsächlich für diese Herausforderung, und ich dachte, es würde Spaß machen, es zu tun. Sehen Sie es in Aktion mit dem obigen Snippet (klicken Sie auf "Code-Snippet anzeigen").
Die Liste sollte sich in einer verknüpften HTML-Datei befinden, wobei jedes Element von <a>
Tags umgeben und durch Zeilenumbrüche getrennt ist. Die Listenelemente sollten die einzigen Elemente in ihrem übergeordneten Element sein, z
<a>one</a>
<a>two</a>
<a>three</a>
Erläuterung
a:not(:last-child):nth-child(n+2)::after,
a:nth-last-child(n+3)::after {
content: ",";
}
a + :last-child::before {
content: "and ";
}
Betrachten wir die ungolfed Version oben. Wenn Sie mit der Funktionsweise von CSS nicht vertraut sind, ist alles außerhalb der geschweiften Klammern ein Selektor, der die Menge der HTML-Elemente bestimmt, für die die Deklarationen in den Klammern gelten. Jedes Selektor-Deklarations-Paar wird als Regel bezeichnet . (Es ist komplizierter, reicht aber für diese Erklärung aus.) Bevor ein Stil angewendet wird, wird die Liste nur durch Leerzeichen getrennt angezeigt.
Wir möchten nach jedem Wort Kommas einfügen, mit Ausnahme der letzten, mit Ausnahme von Listen mit zwei Wörtern, die keine Kommas enthalten. Der erste Selektor a:not(:last-child):nth-child(n+2):after
wählt alle Elemente mit Ausnahme des ersten und des letzten aus. :nth-child(n+2)
ist eine kürzere Art zu sagen :not(:first-child)
, und es funktioniert im Grunde durch die Elemente , deren Index (beginnend bei 1) größer als oder gleich 2 Auswahl (Ja, es immer noch verwirrt mich ein wenig. Die MDN docs könnte helfen.)
Jetzt müssen wir nur das erste Element auswählen, um ein Komma zu erhalten, wenn es insgesamt drei oder mehr Elemente gibt. a:nth-last-child(n+3):after
Funktioniert wie :nth-child
, zählt jedoch von hinten und wählt alle Elemente mit Ausnahme der letzten beiden aus. Das Komma nimmt die Vereinigung der beiden Mengen und wir verwenden das :after
Pseudoelement , um content
unmittelbar nach jedem ausgewählten Element einzufügen.
Die zweite Regel ist einfacher. Wir müssen "und" vor dem letzten Element in der Liste einfügen, es sei denn, es ist ein einzelnes Element. Mit anderen Worten, wir müssen das letzte Element auswählen, dem ein anderes Element vorangeht. +
ist der benachbarte Geschwister-Selektor in CSS.