CSS FizzBuzz, has science gone too far?

  • by Amando Abreu
  • on 14 August 2017

Recently at an interview instead of checking whether or not I had a pulse, it was requested that I solve the FizzBuzz challenge in a language of my choice.

Naturally, I chose CSS.

“Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”.”

It’s insanely simple.

To not display the number, for every 3rd and 5th element, set the font-size to 0.


li:nth-child(3n), li:nth-child(5n){
    
    font-size:0px;

}

To display Fizz for every multiple of 3, for every 3rd element, write “Fizz” with the :before pseudo element.


li:nth-child(3n):before{

    content: 'Fizz';
     
    font-size:15px;

}

To display “Buzz” for every multiple of 5, for every 5th element, write “Buzz” with the :before pseudo element.


li:nth-child(5n):after{
     
    content: 'Buzz';
    
    font-size:15px;
}

“FizzBuzz” comes for free whenever every 3rd and every 5th elements are the same.

See the Pen CSS FizzBuzz by Amando Abreu (@amando96) on CodePen.

About the author

Amando Abreu is a serial entrepreneur, Fractional CTO, and engineer who has been involved in several startups and launched dozens of products. He has worked with companies such as trivago, Portugal Telecom, and Vizrt. He has experience in several industries, most notably e-commerce, SaaS, media, travel, insurance, property development, and construction.
No comments, just