Fizz Buzz in CSS

#1

Post by froober » Fri, Dec 05, 2025, 8:18 PM UTC

Re: Fizz Buzz in CSS

#2

Post by kevinsync » Fri, Dec 05, 2025, 9:30 PM UTC

I love this, it's a very clever and funny way to solve the problem. Makes me think about how there are infinite routes from A to B, some more scenic and whimsical than others.. as well as all the people I've met along the way who would be so pissed and pedantic about how this isn't a "real solution" LOL

Re: Fizz Buzz in CSS

#3

Post by susam » Fri, Dec 05, 2025, 9:33 PM UTC

A shorter solution is possible with an ordered list () 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.

Re: Fizz Buzz in CSS

#4

Post by [deleted] » Fri, Dec 05, 2025, 9:36 PM UTC

kevinsync wrote: post #2

I love this, it's a very clever and funny way to solve the problem. Makes me think about how there are infinite routes from A to B, some more scenic and whimsical than others.. as well as all the people I've met along the way who would be so pissed and pedantic about how this isn't a "real solution" LOL

[deleted]

Re: Fizz Buzz in CSS

#5

Post by carl_dr » Fri, Dec 05, 2025, 9:37 PM UTC

Ignoring the size of the HTML in addition to the CSS, it’s fun, but not really fair when talking about code golf. Beyond a few numbers, you need to include some JavaScript and generating a million list elements. But those bytes count …

Re: Fizz Buzz in CSS

#6

Post by cluckindan » Fri, Dec 05, 2025, 9:56 PM UTC

susam wrote: post #3

A shorter solution is possible with an ordered list ( ) 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-c…

    list-style-position: inside;

Re: Fizz Buzz in CSS

#7

Post by susam » Fri, Dec 05, 2025, 10:06 PM UTC

cluckindan wrote: post #6

susam wrote: post #3

A shorter solution is possible with an ordered list ( ) 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-c…

list-style-position: inside;

Yes! However, like I mentioned in my previous comment, corrections like this cancel out the number of bytes saved with the -based solution.

I mean, the solution in the original post is 152 characters long.

The based solution is 129 characters long. Shorter but uglier.

If we add your correction, we get neater output, which is nice, but it comes at the cost of 30 additional characters in the minified code thereby making the solution 159 characters long.

  li { list-style-position: inside }
  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" }

Re: Fizz Buzz in CSS

#8

Post by hyperhello » Fri, Dec 05, 2025, 10:23 PM UTC

kevinsync wrote: post #2

I love this, it's a very clever and funny way to solve the problem. Makes me think about how there are infinite routes from A to B, some more scenic and whimsical than others.. as well as all the people I've met along the way who would be so pissed and pedantic about how this isn't a "real solution" LOL

The problem is that you have to define the problem enough to avoid the fact that it's trivial to output the string "1,2,Fizz,4,Buzz,......" and fulfill the assignment. You can, in fact, output "$1,$2,Fizz,$4,Buzz,..." where $ is any prefix itself divisible by 15 (there are other templates for the other situations but it clearly does repeat endlessly.)

Re: Fizz Buzz in CSS

#9

Post by [deleted] » Fri, Dec 05, 2025, 10:44 PM UTC

susam wrote: post #3

A shorter solution is possible with an ordered list ( ) 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-c…

[deleted]

Re: Fizz Buzz in CSS

#10

Post by graiz » Fri, Dec 05, 2025, 11:12 PM UTC

145 using P instead of li.

p{counter-increment:n} p:not(:nth-child(5n)):before{content:counter(n)} p:nth-child(3n):before{content:"Fizz"} p:nth-child(5n):after{content:"Buzz"}