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 non è visto troppo spesso nel golf del codice perché può solo formattare il testo, ma in realtà funziona per questa sfida e ho pensato che sarebbe stato divertente farlo. Guardalo in azione usando lo snippet sopra (fai clic su "Mostra snippet di codice").
L'elenco dovrebbe essere in un file HTML collegato con ogni elemento circondato da <a>
tag e separato da interruzioni di riga. Le voci dell'elenco dovrebbero essere gli unici elementi nel loro elemento padre, ad es
<a>one</a>
<a>two</a>
<a>three</a>
Spiegazione
a:not(:last-child):nth-child(n+2)::after,
a:nth-last-child(n+3)::after {
content: ",";
}
a + :last-child::before {
content: "and ";
}
Consideriamo la versione non golfata sopra. Se non hai familiarità con il funzionamento dei CSS, tutto al di fuori delle parentesi graffe è un selettore che determina l'insieme di elementi HTML a cui si applicano le dichiarazioni all'interno delle parentesi graffe. Ogni coppia di selettori-dichiarazioni è chiamata regola . (È più complicato di così, ma basterà per questa spiegazione.) Prima di applicare qualsiasi stile, l'elenco appare separato da soli spazi.
Vogliamo aggiungere virgole dopo ogni parola tranne l'ultima, ad eccezione degli elenchi di due parole, che non ottengono virgole. Il primo selettore, a:not(:last-child):nth-child(n+2):after
seleziona tutti gli elementi tranne il primo e l'ultimo. :nth-child(n+2)
è un modo più breve per dirlo :not(:first-child)
, e funziona fondamentalmente selezionando elementi il cui indice (a partire da 1) è maggiore o uguale a 2. (Sì, mi confonde ancora un po '. I documenti MDN potrebbero aiutare.)
Ora dobbiamo solo selezionare il primo elemento per ottenere una virgola se ci sono tre o più elementi in totale. a:nth-last-child(n+3):after
funziona come :nth-child
, ma contando da dietro, quindi seleziona tutti gli elementi tranne gli ultimi due. La virgola prende l'unione dei due set e usiamo lo :after
pseudo-elemento per aggiungere content
immediatamente dopo ogni elemento selezionato.
La seconda regola è più semplice. Dobbiamo aggiungere "e" prima dell'ultimo elemento nell'elenco, a meno che non sia un singolo elemento. In altre parole, dobbiamo selezionare l'ultimo elemento preceduto da un altro elemento. +
è il selettore di fratelli adiacenti nel CSS.