Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
FizzBuzz with 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";
}
<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>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.