CSS, 132 116 115 bayt
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 kod golfünde çok sık görülmez, çünkü yalnızca metni biçimlendirebilir, ancak aslında bu zorluk için işe yarar ve yapmanın eğlenceli olacağını düşündüm. Yukarıdaki snippet'i kullanarak çalışırken görün ("Kod snippetini göster" i tıklayın).
Liste, her bir öğe <a>
etiketlerle çevrili ve satır kesmeleriyle ayrılmış olarak bağlantılı bir HTML dosyasında olmalıdır . Liste öğeleri, üst öğelerinde bulunan tek öğeler olmalıdır; örn.
<a>one</a>
<a>two</a>
<a>three</a>
açıklama
a:not(:last-child):nth-child(n+2)::after,
a:nth-last-child(n+3)::after {
content: ",";
}
a + :last-child::before {
content: "and ";
}
Yukarıda ungolfed versiyonunu düşünelim. CSS'nin nasıl çalıştığını bilmiyorsanız, küme parantezlerinin dışındaki her şey, ayraçların içindeki bildirimlerin uygulanacağı HTML öğeleri kümesini belirleyen bir seçicidir. Her bir seçici-bildirim çiftine kural denir . (Bundan daha karmaşıktır, ancak bu açıklama için yeterli olacaktır.) Herhangi bir stil uygulanmadan önce, liste yalnızca boşluklarla ayrılmış olarak görünür.
Sonuncusu hariç her kelimenin arkasına virgül eklemek istiyoruz, iki kelimeli listeler hariç, virgül yok. İlk seçici, a:not(:last-child):nth-child(n+2):after
ilk ve son hariç tüm elemanları seçer. :nth-child(n+2)
bu, daha kısa bir ifade şeklidir :not(:first-child)
ve temel olarak indeksi (1'den başlayarak) 2'den büyük veya ona eşit olan öğeleri seçerek çalışır. (Evet, hala beni biraz şaşırtıyor . MDN belgeleri yardımcı olabilir.)
Şimdi sadece bir virgül almak için ilk elemanını seçmek gerekir eğer üç veya daha fazla unsur var toplamı vardır. a:nth-last-child(n+3):after
gibi çalışır :nth-child
, ancak arkadan sayılarak son iki hariç tüm öğeleri seçer. Virgül, iki kümenin birleşimini alır ve seçili her öğenin hemen ardından eklemek için :after
sözde öğeyi kullanırız content
.
İkinci kural daha kolaydır. Tek bir öğe olmadıkça listedeki son öğeden önce "ve" eklememiz gerekir. Başka bir deyişle, daha önce başka bir öğeden önce gelen öğeyi seçmemiz gerekir. +
olan bitişik Kardeş seçici CSS.