FizzBuzz with CSS

dabblet.css

/**
 * FizzBuzz with CSS
 */


body {
	counter-reset: fizzbuzz;
}

div {
	width: 100px;
	height: 20px;
	background: #ddd;
	margin: 0 0 10px;
}

div:after {
	content: counter(fizzbuzz);
	counter-increment: fizzbuzz;
}

div:nth-child(3n):not(:nth-child(5n)):after {
	content: "fizz";
}

div:nth-child(5n):not(:nth-child(3n)):after {
	content: "buzz";
}

div:nth-child(3n):nth-child(5n):after {
	content: "fizzbuzz";
}

dabblet.html

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
Brought to you by <a href="http://twitter.com/jackiebackwards">Jackie Balzer</a> and <a href="http://behance.net">Behance</a>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}