Solving FizzBuzz with CSS
dabblet.com
dabblet.com
The cascade of the CSS will take care of the cases the div is a 'fizzbuzz'.
Sorry I can't post the example, Dabblet is working strangely for me this morning.
CSS that should work:
/**
* 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)::after {
content: "fizz";
}
div:nth-child(5n)::after {
content: "buzz";
}
div:nth-child(15n)::after {
content: "fizzbuzz";
}I started the experiment using background color instead of "fizz", border color instead of "buzz", and box-shadow instead of "fizzbuzz" which necessitated the need for :nots since the properties weren't overriding.
div:nth-child(3n):after { content: ""; }
div:nth-child(3n):before { content: "fizz"; }
div:nth-child(5n):after { content: "buzz"; }
IE8 viewers expect devs to slow progress or cater to them would be like horse and buggy drivers from days of yore lobbying to prevent cars from going faster than horses.
Stop complaining, get off your horse and get a (free) car. Encourage your clients to do likewise.
So yes, "stuck".
Try it in Firefox instead.