Get the latest tech news

Fizz Buzz in CSS


What is the smallest CSS code we can write to print the Fizz Buzz sequence? I think it can be done in four lines of CSS as shown below: li { counter-increment: n } li:not(:nth-child(5n))::before { content: counter(n) } li:nth-child(3n)::before { content: "Fizz" } li:nth-child(5n)::after { content: "Buzz" } Here is a complete working example: css-fizz-buzz.html. I am neither a web developer nor a code-golfer.

None

Get the Android app

Or read this on Hacker News

Read more on:

Photo of css

css

Photo of Fizz Buzz

Fizz Buzz

Related news:

News photo

CSS now has an if() conditional function

News photo

Fizz Buzz without conditionals or booleans

News photo

Show HN: A CSS-Only Terrain Generator