CSS, 132 116 115 байт
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 не надто часто зустрічається, оскільки він може лише форматувати текст, але він справді працює для цього завдання, і я думав, що це буде цікаво зробити. Дивіться це в дії, використовуючи фрагмент, описаний вище (натисніть "Показати фрагмент коду").
Список має бути у зв'язаному HTML-файлі з кожним елементом, оточеним <a>
тегами та розділеним перервами рядків. Елементи списку повинні бути єдиними елементами їхнього батьківського елемента, наприклад
<a>one</a>
<a>two</a>
<a>three</a>
Пояснення
a:not(:last-child):nth-child(n+2)::after,
a:nth-last-child(n+3)::after {
content: ",";
}
a + :last-child::before {
content: "and ";
}
Розглянемо версію, що не перебуває в нагорі. Якщо ви не знайомі з тим, як працює CSS, все поза фігурними дужками - це селектор, який визначає набір елементів HTML, до яких застосовуються декларації всередині дужок. Кожна пара селектор-декларація називається правилом . (Це складніше, ніж це, але буде достатньо для цього пояснення.) Перед застосуванням будь-якого стилю список з'являється розділеним лише пробілами.
Ми хочемо додавати коми після кожного слова, окрім останнього, за винятком двосписних списків, у яких не виникає коми. Перший селектор, a:not(:last-child):nth-child(n+2):after
вибирає всі елементи, крім першого та останнього. :nth-child(n+2)
це коротший спосіб сказати :not(:first-child)
, і він, в основному, працює, вибираючи елементи, індекс яких (починаючи з 1) більший або дорівнює 2. (Так, це все ще мене трохи бентежить. Документи MDN можуть допомогти.)
Тепер нам просто потрібно вибрати перший елемент, щоб отримати кому, якщо всього три або більше елементів. a:nth-last-child(n+3):after
працює як :nth-child
, але рахуючи ззаду, тому він вибирає всі елементи, крім двох останніх. Кома приймає об'єднання двох множин, і ми використовуємо :after
псевдоелемент для додавання content
відразу після кожного вибраного елемента.
Друге правило простіше. Нам потрібно додати "і" перед останнім елементом у списку, якщо тільки це не один елемент. Іншими словами, нам потрібно вибрати останній елемент, якому передує інший елемент. +
- сусідній селектор сестер у CSS.