

Solving FizzBuzz with CSS - jackiebalzer
http://dabblet.com/gist/2628265

======
danab
Correct me if I'm wrong, but I don't believe you need any of the :not
statements, and instead or (3n) and (5n) you can just use 15n for the
'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:

    
    
      /**
       * 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";
      }

~~~
jontro
This should also work:

div:nth-child(3n):after { content: ""; }

div:nth-child(3n):before { content: "fizz"; }

div:nth-child(5n):after { content: "buzz"; }

~~~
danab
I retract my answer in favor of this. Clever.

~~~
Sivart13
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".

------
eykanal
Heh... how this looks in IE 8: <http://i.stack.imgur.com/Fz3jT.png>

~~~
scribblemacher
To be fair, isn't that what most sites look like in IE8?

~~~
jenius
hahah win.

------
alainbryden
No rest until CSS is Turing complete.

~~~
espo
You mean like this CSS-implementation of Rule 110? <http://eli.fox-
epste.in/rule110-full.html>

~~~
thisisblurry
For those who tried this in Chrome, like me, it won't work :(

Try it in Firefox instead.

~~~
khwang
Worked fine for me.

~~~
bawllz
ditto

------
thekungfuman
Goes to show how many (greatly needed) programmatic features CSS is adding.
Also shows that some people love a creative way to attack a problem.

~~~
its_so_on
As God is my witness, CSS will need to be split into a presentation language
and a logic language. /s

~~~
evincarofautumn
You know, that’s not such an outlandish claim. CSS is accumulating features
that seem to me completely out of place in a styling language. Then again,
HTML isn’t perfect, nor JavaScript, nor PHP or any language—but we still get
stuff done with them, so who am I to complain?

------
DavidAbrams
Is this some regional drinking game? Like Three-Man?

