CSS, 132 116 115 byte
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 tidak terlihat terlalu sering dalam kode golf karena hanya dapat memformat teks, tetapi sebenarnya berfungsi untuk tantangan ini dan saya pikir itu akan menyenangkan untuk dilakukan. Lihat beraksi menggunakan cuplikan di atas (klik "Tampilkan cuplikan kode").
Daftar harus dalam file HTML tertaut dengan setiap elemen dikelilingi oleh <a>
tag dan dipisahkan oleh jeda baris. Item daftar harus menjadi satu-satunya elemen dalam elemen induknya, mis
<a>one</a>
<a>two</a>
<a>three</a>
Penjelasan
a:not(:last-child):nth-child(n+2)::after,
a:nth-last-child(n+3)::after {
content: ",";
}
a + :last-child::before {
content: "and ";
}
Mari kita simak versi yang tidak diserang di atas. Jika Anda tidak terbiasa dengan cara kerja CSS, segala sesuatu di luar kurung kurawal adalah pemilih yang menentukan sekumpulan elemen HTML yang berlaku deklarasi di dalam kurung kurawal. Setiap pasangan pemilih-deklarasi disebut aturan . (Ini lebih rumit dari itu tetapi cukup untuk penjelasan ini.) Sebelum gaya apa pun diterapkan, daftar tampak dipisahkan oleh spasi saja.
Kami ingin menambahkan koma setelah setiap kata kecuali yang terakhir, kecuali untuk daftar dua kata, yang tidak mendapat koma. Pemilih pertama a:not(:last-child):nth-child(n+2):after
,, memilih semua elemen kecuali yang pertama dan yang terakhir. :nth-child(n+2)
adalah cara yang lebih pendek untuk mengatakan :not(:first-child)
, dan pada dasarnya bekerja dengan memilih elemen yang indeksnya (mulai dari 1) lebih besar dari atau sama dengan 2. (Ya, itu masih sedikit membingungkan saya. Dokumen MDN mungkin membantu.)
Sekarang kita hanya perlu memilih elemen pertama untuk mendapat koma jika ada tiga atau lebih elemen total. a:nth-last-child(n+3):after
bekerja seperti :nth-child
, tetapi menghitung dari belakang, sehingga memilih semua elemen kecuali dua yang terakhir. Koma mengambil gabungan dari dua set, dan kami menggunakan :after
elemen pseudo untuk menambahkan content
segera setelah setiap elemen yang dipilih.
Aturan kedua lebih mudah. Kita perlu menambahkan "dan" sebelum elemen terakhir dalam daftar, kecuali itu adalah elemen tunggal. Dengan kata lain, kita perlu memilih elemen terakhir yang didahului oleh elemen lain. +
adalah pemilih saudara yang berdekatan di CSS.