FizzBuzz in CSS

Filed under: just because you can, doesn’t mean you should.

Discussions on Slack turned to interview questions yesterday afternoon. After many sensible suggestions, the ideas headed in a more lighthearted/sarcastic direction.

Implement FizzBuzz in CSS

Immediately after hitting send, a sudden urge to complete the task came over me. The rules are as follows:

“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”

<ol> seemed like the obvious choice to output numbers. Then it was a case of writing Fizz in :before

li:nth-child(3n):before {
    content: 'Fizz';
}

Buzz in :after

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

And hiding the numbers for those items:

li:nth-child(3n),
li:nth-child(5n) {
    list-style: none;
}