Pure CSS FizzBuzz

index.html

Based on the implementation from <a href="http://joseph.mx/blog/2015/05/12/Pure-CSS-FizzBuzz.html">http://joseph.mx/blog/2015/05/12/Pure-CSS-FizzBuzz.html</a><br />
I just added the numbers, which was easier than I first thought because counters exist: <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters">https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters</a>
<div class="container">
  
</div>

Pure CSS FizzBuzz.markdown

Pure CSS FizzBuzz ('-' * 17)

Forked from Captain Anonymous's Pen xGVKgm. Originally made without numbers by Joe Collins

A Pen by Stephen Perelson on CodePen where I added pure CSS numbers.

License.

script.js

for(i = 0; i < 30; i++){
  $(".container").append("<div class='fizzbuzz'><span></span></div>")
}

style.css

body {
  counter-reset: fizzbuzz;
}
.fizzbuzz {
  width: 70px;
  height: 35px;
  background: black;
  margin: 20px;
  float: left;
  color: white;
  text-align: center;
  padding-top: 15px;
  counter-increment: fizzbuzz;
}
.fizzbuzz span::before {
  content: counter(fizzbuzz);
}

.fizzbuzz:nth-of-type(3n){
  background: green;
}
.fizzbuzz:nth-of-type(3n) span {
  display: none;
}
.fizzbuzz:nth-of-type(3n)::before{
  content: "fizz";
}

.fizzbuzz:nth-of-type(5n){
  background: blue;
}
.fizzbuzz:nth-of-type(5n) span {
  display: none;
}
.fizzbuzz:nth-of-type(5n)::before{
  content: "buzz";
}

.fizzbuzz:nth-of-type(3n).fizzbuzz:nth-of-type(5n){
  background: orange !important;
}
.fizzbuzz:nth-of-type(3n).fizzbuzz:nth-of-type(5n) span {
  display: none;
}
.fizzbuzz:nth-of-type(3n).fizzbuzz:nth-of-type(5n)::before{
  content: "fizzbuzz"
}