Re:Solving FizzBuzz with CSS
by jackiebalzer on Monday May 07, 2012 @11:45AM
(#3939475)
Correct, you don't need the :nots as long as the CSS is in that order, since the :after content would be overridden correctly. You would need them if you changed the order of the statements.
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.
This should also work:
div:nth-child(3n):after { content: ""; }
div:nth-child(3n):before { content: "fizz"; }
div:nth-child(5n):after { content: "buzz"; }
I retract my answer in favor of this. Clever.
I think your answer is a lot more readable, though. I have to squint at jontro's version for a while before determining that it'll actually product the string "fizzbuzz".
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: