sivulka / cssfizzbuzz

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>