Skip to content

Youpinadi/cssfizzbuzz

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 

Repository files navigation

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>

About

CSS implementation of the infamous FizzBuzz

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published