cssfizzbuzz
cssfizzbuzz copied to clipboard
CSS implementation of the infamous FizzBuzz
CSS FizzBuzz
CSS implementation of the infamous FizzBuzz. No counter used. You can check the result here
Reminder of the rules:
For numbers 1 through 100,
- if the number is divisible by 3 print Fizz;
- if the number is divisilbe by 5 print Buzz;
- if the number is divisible by 3 and 5 (15) print FizzBuzz;
- else, print the number.
CSS:
ol
{
list-style-position: inside;
}
li:nth-child(3n),
li:nth-child(5n)
{
list-style: none;
}
li:nth-child(3n):before
{
content: 'Fizz';
}
li:nth-child(5n):after
{
content: 'Buzz';
}
HTML:
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>