256 Kilobytes

Solving FizzBuzz with CSS

Articles in Style and Layout | By August R. Garcia

Published 2 months agoTue, 26 Feb 2019 18:12:53 -0800 | Last update 2 months agoTue, 26 Feb 2019 18:29:02 -0800

CSS counters, before and after pseudo-elements, :not selectors, and :nth-child selectors.

165 views, 0 RAMs, and 0 comments

You can get a reasonably functional solution far for this problem by using :nth-child selectors combined with :before and :after pseudo-elements.

<style>
/* Hide the automatic numbering from the OL for any that show Fizz and/or Buzz */
ol.fizzbuzz li:nth-child(3n),
ol.fizzbuzz li:nth-child(5n)        { list-style-type:none; }

/* Show the strings. */
ol.fizzbuzz li:nth-child(3n):before { content:"Fizz"        }
ol.fizzbuzz li:nth-child(5n):after  { content:"Buzz"        }

/* Align the OL numbering with the Fizz/Buzz/FizzBuzz content */
ol.fizzbuzz li:not(:nth-child(3n)):not(:nth-child(5n))  { margin-left:2.5em;  }

/* For Alignment Purposes */
ol.fizzbuzz                      { list-style-type: decimal-leading-zero; padding:0; font-family:monospace; }
</style>
<ol class="fizzbuzz">
<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><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>
<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><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>

But, the hack in that post (margin-left:2.5em) to align the OL's automatic numbers with the LI content is garbage. This can be improved further by using CSS counters.

<style>
/* Counters */
ol.fizzbuzz    { counter-reset:    n; }
ol.fizzbuzz li { counter-increment:n; }                                    

/* Show the strings. */
ol.fizzbuzz li:nth-child(3n):before { content:"Fizz"        }
ol.fizzbuzz li:nth-child(5n):after  { content:"Buzz"        }

/* Show the counter's value */
ol.fizzbuzz li:not(:nth-child(3n)):not(:nth-child(5n)):before  { content:counter(n);  }

/* Miscellaneous Styles */
ol.fizzbuzz    { font-family:monospace; padding:0; list-style-type:none;   }
</style>

<ol class="fizzbuzz">
<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><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>
<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><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>

The output (of the second code block above) looks like this:

Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 2 months ago

Edit History

• [2019-02-26 18:12 PST] August R. Garcia (2 months ago)
• [2019-02-26 18:12 PST] August R. Garcia (2 months ago)
• [2019-02-26 18:12 PST] August R. Garcia (2 months ago)
• [2019-02-26 18:12 PST] August R. Garcia (2 months ago)
• [2019-02-26 18:12 PST] August R. Garcia (2 months ago)
• [2019-02-26 18:12 PST] August R. Garcia (2 months ago)
🕓 Posted at 26 February, 2019 18:12 PM PST

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 135 🗨 706 🐏 164
Site Owner

Grahew Mattham

August Garcia is some guy who used to sell Viagra on the Internet. He made this website to LARP as a sysadmin while posting about garbage like user-agent spoofing, spintax, the only good keyboard, virtual assitants from Pakistan, links with the rel="nofollow" attributeproxies, regular expressions, HTML and CSSsin, the developer console, and probably some other trash.


Account created 5 months ago.
135 posts, 706 comments, and 164 RAMs.

Last active 1 day ago:
Posted thread Dear Websites -- Update Your "Powered by vBulletin® Version 3.7.3" Websites; The current version is 5.5.2

Post a New Comment

To leave a comment, login to your account or create an account.

Do you like having a good time?

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account
You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.