CSS FizzBuzz

Saw this recently on twitter and am placing it here for posterity’s sake.

<html>
<head>
<title>Fizz Buzz via CSS</title>
<style>
body {
	counter-reset:n;
}
div:before {
	counter-increment:n;
	content: counter(n);
}
div:nth-child(3n):before {
	content:"fizz";
}
div:nth-child(5n):before {
	content:"buzz";
}
div:nth-child(3n):nth-child(5n):before {
	content:"fizzbuzz";
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
...
</body>
</html>

Published on October 21, 2016