One recurring complaint among experienced programmers is that there are lots of junior talent that could not even implement a simple FizzBuzz program. One blog article that started it off was Using FizzBuzz to Find Developers who Grok Coding, written in 2007 by Imran Ghory, and after Jeff Atwood wrote about it, literally hundreds of programmers wanted to prove their value by writing FizzBuzz solutions in every conceivable way and in every language available.

Just for fun, I tried writing a pure CSS solution, just like my pure CSS "Hello World" solution, but unfortunately, I couldn't. No matter how I try, I still have to add 100 P elements to the HTML document. But once that is done, the solution is really simple.

body { counter-reset: i; }
p    { counter-increment: i; }

p:before               { content: counter(i); }
p:nth-child(5n):before { content: '';         }
p:nth-child(3n):before { content: 'Fizz';     }
p:nth-child(5n):after  { content: 'Buzz';     }

This use of CSS is not as unorthodox as with Hello World, but it's still very convoluted. But then again, the FizzBuzz challenge is a pretty convoluted way of putting interviewees to the test.

Oh, and I made a pen for you.