zlacker

Fizz Buzz in CSS

submitted by froobe+(OP) on 2025-12-05 20:18:22 | 105 points 22 comments
[view article] [source] [go to bottom]

NOTE: showing posts with links only show all posts
2. susam+pf[view] [source] 2025-12-05 21:33:57
>>froobe+(OP)
A shorter solution is possible with an ordered list (<ol>) if we're willing to ignore the untidy output:

  li:nth-child(3n), li:nth-child(5n) { list-style: none }
  li:nth-child(3n)::before { content: "Fizz" }
  li:nth-child(5n)::after { content: "Buzz" }
Example: https://susam.net/code/web/css-fizz-buzz-ol.html

  $ curl -sS https://susam.net/code/web/css-fizz-buzz-ol.html | sed -n '/none/,/after/p' |  tr -d '[:space:]' 
  li:nth-child(3n),li:nth-child(5n){list-style:none}li:nth-child(3n)::before{content:"Fizz"}li:nth-child(5n)::after{content:"Buzz"}
  $ curl -sS https://susam.net/code/web/css-fizz-buzz-ol.html | sed -n '/none/,/after/p' |  tr -d '[:space:]' | wc -c
  129
But I don't quite like how misaligned the numbers and the words look in this version. Correcting that would call for extra code that would cancel out the characters saved.
8. dsmmck+lz[view] [source] 2025-12-05 23:42:08
>>froobe+(OP)
144, using css variables, with fallback and p instead of li

https://codepen.io/dsmmcken/pen/WbwYOEQ?editors=0100

p{counter-increment:n;--n:counter(n)}p:nth-child(3n){--f:"Fizz"}p:nth-child(5n){--b:"Buzz";--n:''}p::after{content:var(--f,var(--n))var(--b,'')}

[go to top]