Fizz Buzz in CSS

2025-12-06T00:00:00Z

How many CSS selectors and declarations do we need to produce the Fizz Buzz sequence? Of course we could do this with no CSS at all simply by placing the entire sequence as text in the HTML body. So to make the problem precise as well as to keep it interesting, we require that all text that appears in the Fizz Buzz sequence comes directly from the CSS. Placing any part of the output numbers or words outside the stylesheet is not allowed. JavaScript is not allowed either. With these constraints, I think we need at least four CSS selectors along with four declarations to solve this puzzle, 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.

The above solution contains four CSS rules with one selector and one declaration in each rule. For example, li { counter-increment: n } is one rule consisting of the selector li and the declaration counter-increment: n.

Seasoned code golfers looking for a challenge can probably shrink this solution further. A common trick to solve this problem is to use an ordered list (<ol>) which provides the integers in the form of list markers automatically, thereby eliminating the need to maintain a counter in the stylesheet. However, this violates the requirement set out in the introduction. We want every integer to be produced directly by the stylesheet. Treating the integers in the list markers as part of the output sequence breaks this rule. Not to mention the output looks untidy because of the unnecessary dot after each marker and also because the numbers and words appear misaligned. See an example of that trick here: css-fizz-buzz-ol.html. Correcting the misaligned output calls for extra code that cancels out the number of declarations saved. In any case, the requirement that all integers of the output must come directly from the stylesheet prevents untidy solutions like this and also forces us to rely on the capabilities of CSS to solve this puzzle.

The intention here was to obtain the smallest possible code in terms of the number of CSS declarations. This example is not crafted to minimise bytes, but for code golfers who enjoy reducing byte count, here is the number of bytes this solution consumes after removing all whitespace:

$ curl -sS https://susam.net/css-fizz-buzz.html | sed -n '/counter/,/after/p' | tr -d '[:space:]' | wc -c
152

Further reduction in byte count can be achieved by using the <p> element instead of <li>, nesting CSS selectors, etc. I'll leave that as an exercise for the reader. Returning to the focus of this post as well as to summarise it, the solution here uses four CSS rules consisting of four selectors and four declarations to render the Fizz Buzz sequence.

CSS Experiments: overflow-wrap vs word-break

2025-06-16T00:00:00Z

An example page demonstrating experiments with the CSS overflow-wrap and word-break properties.

Read on website | #web | #css

Susam's CSS Pages

Fizz Buzz in CSS

CSS Experiments: overflow-wrap vs word-break