An interesting CSS interview question, FizzBuzz ~

FizzBu​​zz is an interesting topic. Let's look at the topic:

Fizz if it is a multiple of 3, Buzz if it is a multiple of 5, FizzBuzz if it is a multiple of 3 and a multiple of 5.

In some programming languages, this is a relatively rudimentary topic, and of course, with a little conversion, we can turn it into a topic about CSS selectors.

Suppose we have the following structure:

<ul>
    <li></li>
    <li></li>
    <li></li>
    // ... 很多个 li
    <li></li>
    <li></li>
</ul>

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

The desired effect is as follows:

simple analysis questions

This topic seems to examine CSS selectors, but there are actually several hidden test points:

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

The first test point here is the CSS pseudo-element . In CSS, the text content can be filled with the content attribute of the pseudo-element.

2. How to fill the current sequence number of li?

The second test point is how to fill the index number of the current li? It is relatively simple to find the corresponding multiples of 3, 5, and 15 through the selector. How should the serial number of the remaining li not meet the rules be filled?

The CSS counter needs to be applied here, that is, the following two properties:

• counter-increment
• counter

Property is used to increment the value of CSS Counters by a given value. It can be used to implement a counter inside CSS.

problem solving

After a simple analysis, the problem-solving is relatively simple, just go to 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";
}

If the fizzbuzz rule is not satisfied, use the CSS counter to fill the content content content: counter(fizzbuzz) , and if the rule is satisfied, use the corresponding string to fill the content.

The result is as follows:

CodePen Demo -- CSS FizzBuzz 1

extend it

Of course, this FizzBuzz can also be used to create some interesting layouts. We use the layout of FizzBuzz to build 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;
}

It can be used to generate some interesting background grids:

When zoomed in, there is even a sense of visual dislocation. Of course, changing the width of the box, the effect is constantly changing:

CodePen Demo -- CSS FizzBuzz Grid

finally

Well, this is the end of this article, I hope it helps you :)

If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.

This article participated in the SegmentFault Sifu essay " How to "Anti-kill" the Interviewer? ", you are welcome to join.