[HN Gopher] Fizz Buzz in CSS
       ___________________________________________________________________
        
       Fizz Buzz in CSS
        
       Author : froober
       Score  : 37 points
       Date   : 2025-12-05 20:18 UTC (2 hours ago)
        
 (HTM) web link (susam.net)
 (TXT) w3m dump (susam.net)
        
       | kevinsync wrote:
       | 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
        
         | hyperhello wrote:
         | 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,6,......" and fulfill the assignment. You can,
         | in fact, output "$1,$2,Fizz,$4,Buzz,$6..." where $ is any
         | prefix itself divisible by 15 (there are other templates for
         | the other situations) but it clearly does repeat endlessly.
        
       | susam wrote:
       | 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 bytes saved.
        
         | cluckindan wrote:
         | list-style-position: inside;
        
           | susam wrote:
           | Yes! However, like I mentioned in my previous comment,
           | corrections like this cancel out the number of bytes saved
           | with the <ol>-based solution.
           | 
           | I mean, the solution in the original post is 152 characters
           | long.
           | 
           | The <ol> 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" }
        
       | carl_dr wrote:
       | 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 ...
        
       ___________________________________________________________________
       (page generated 2025-12-05 23:00 UTC)