CSS, 132 116 115 bajtów
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 nie pojawia się zbyt często w golfowym kodzie, ponieważ może formatować tylko tekst, ale tak naprawdę działa w tym wyzwaniu i pomyślałem, że fajnie byłoby to zrobić. Zobacz go w akcji za pomocą powyższego fragmentu (kliknij „Pokaż fragment kodu”).
Lista powinna znajdować się w połączonym pliku HTML z każdym elementem otoczonym <a>
znacznikami i oddzielonymi podziałami linii. Elementy listy powinny być jedynymi elementami w ich elemencie nadrzędnym, np
<a>one</a>
<a>two</a>
<a>three</a>
Wyjaśnienie
a:not(:last-child):nth-child(n+2)::after,
a:nth-last-child(n+3)::after {
content: ",";
}
a + :last-child::before {
content: "and ";
}
Rozważmy powyższą wersję bez golfisty. Jeśli nie wiesz, jak działa CSS, wszystko poza nawiasami klamrowymi jest selektorem, który określa zestaw elementów HTML, do których mają zastosowanie deklaracje w nawiasach klamrowych. Każda para deklaracji selektora nazywana jest regułą . (Jest to bardziej skomplikowane, ale wystarczy to wyjaśnienie.) Przed zastosowaniem jakiegokolwiek stylu lista wydaje się być oddzielona tylko spacjami.
Chcemy dodawać przecinki po każdym słowie oprócz ostatniego, z wyjątkiem list dwóch słów, które nie otrzymują przecinków. Pierwszy selektor „ a:not(:last-child):nth-child(n+2):after
wybiera wszystkie elementy oprócz pierwszego i ostatniego. :nth-child(n+2)
jest krótszym sposobem powiedzenia :not(:first-child)
i działa w zasadzie poprzez wybranie elementów, których indeks (od 1) jest większy lub równy 2. (Tak, nadal mnie trochę myli. Dokumenty MDN mogą pomóc).
Teraz musimy tylko wybrać pierwszy element, aby uzyskać przecinek, jeśli łącznie są trzy lub więcej elementów. a:nth-last-child(n+3):after
działa jak :nth-child
, ale licząc od tyłu, więc zaznacza wszystkie elementy oprócz dwóch ostatnich. Przecinek przyjmuje sumę dwóch zestawów, a my używamy :after
pseudoelementu, aby dodać content
bezpośrednio po każdym wybranym elemencie.
Druga zasada jest łatwiejsza. Musimy dodać „i” przed ostatnim elementem na liście, chyba że jest to pojedynczy element. Innymi słowy, musimy wybrać ostatni element poprzedzony innym elementem. +
to sąsiedni selektor rodzeństwa w CSS.