FizzBuzz is an interesting topic. Let’s look at the title:

If you meet a multiple of 3, say Fizz. If you meet a multiple of 3, say FizzBuzz.

In some programming languages, this is a fairly elementary topic, but with a little twist, we can turn it into a topic about CSS selectors.

Suppose we have the following structure:

<ul>
    <li></li>
    <li></li>
    <li></li>/ /... A number of li<li></li>
    <li></li>
</ul>
Copy the code

Using CSS selectors, when li is a multiple of 3, li outputs Fizz. If li is both a multiple of 3 and a multiple of 5, li outputs FizzBuzz. Of course, if the above three conditions are not met, the current serial number needs to be output.

The required effect is as follows:

Simple analysis of the topic

CSS selectors: CSS selectors: CSS selectors

  1. <li></li>Internal value itself is null, how to assign content?

The first thing to look at here is CSS pseudo-elements, where you can fill text content with the content property of the pseudo-element.

  1. How to fill in the current sequence number of LI?

Insert the current index of li. It is relatively easy to find the corresponding multiples of 3, 5 and 15 through the selector. How should the serial number of the remaining Li that does not meet the rule be filled?

This applies to the CSS counter, which has the following two properties:

  • counter-increment
  • counter

The CSS Counters property is used to increase the value of the CSS Counters by a given value. It can be used to implement a counter inside the CSS.

The problem solving

After a simple analysis, the solution is relatively simple, directly on the code:

li {
    list-style-type: unset;
    counter-increment: fizzbuzz;
}
li::before {
    content: counter(fizzbuzz);
}
li:nth-child(3n)::before {
    content: "fizz";
}
li:nth-child(5n)::before {
    content: "buzz";
}
li:nth-child(15n)::before {
    content: "fizzbuzz";
}
Copy the code

Content: Counter (Fizzbuzz), content: counter(Fizzbuzz), content: counter(Fizzbuzz)

The results are as follows:

CodePen Demo — CSS FizzBuzz 1

Extend the

Of course, FizzBuzz can also be used to create some interesting layouts. We used the FizzBuzz layout to create an interesting grid image:

li {
    width: 40px;
    height: 40px;
    background: lightskyblue;
}
li:nth-child(3n) {
  background-color: azure;
}
li:nth-child(5n) {
  background-color: peachpuff;
}
li:nth-child(15n) {
  background-color: dodgerblue;
}
Copy the code

It can be used to generate some interesting background grid diagrams:

Zoom in, even with some visual dislocation of the feeling. Of course, by changing the width of the box, the effect is constantly changing:

CodePen Demo — CSS FizzBuzz Grid

The last

Well, the end of this article, I hope to help you 🙂

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.