4 ms·
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 cas
by danab 14y ago
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";
}
- jackiebalzer 14y agoCorrect, 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.
- jontro 14y agoThis should also work: div:nth-child(3n):after { content: ""; } div:nth-child(3n):before { content: "fizz"; } div:nth-child(5n):after { content: "buzz"; }