Comment by 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";
  }