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"}
@grahamc

This comment has been minimized.

Copy link

commented May 7, 2012

You win the FizzBuzz game.

@lt

This comment has been minimized.

Copy link

commented May 8, 2012

Slight optimisation: https://gist.github.com/2633966

No need for separate "fizzbuzz" case, you can use the individual "fizz" and "buzz" cases by using :before for "fizz", and moving the :not selectors to the counter block.

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.