How to use pure CSS to achieve the effect of alternating element colors by n%3?

Pure CSS realizes the N%3 cycle effect of element color

In front-end development, it is often necessary to dynamically allocate colors according to element positions, such as realizing the effect of color cycles by N%3. This article will explain how to achieve this effect using CSS only.

Assume that the HTML structure is as follows:

<div class="container">
  <p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>

The goal is to make the p element color cyclically change according to its position (N%3 result): N%3 == 0 is color 1, N%3 == 1 is color 2, and N%3 == 2 is color 3.

First, define the CSS variable to store the color value:

 .container {
  --color1: #fff;
  --color2: #da3838;
  --color3: rgb(49, 196, 23);
}

Then, use nth-child pseudo-class and the calc() var() to dynamically apply the color:

 .container p:nth-child(3n 1) {
  background-color: var(--color1);
}

.container p:nth-child(3n 2) {
  background-color: var(--color2);
}

.container p:nth-child(3n 3) {
  background-color: var(--color3);
}

In the code, 3n 1 , 3n 2 , 3n 3 select elements that satisfy N%3 == 0, N%3 == 1, N%3 == 2, respectively, and apply predefined colors through the var() function. In this way, the background color of each p element will automatically cyclize according to its position in .container , and the N%3 color loop effect of pure CSS can be achieved without JavaScript.

The above is the detailed content of How to use pure CSS to achieve the effect of alternating element colors by n%3?. For more information, please follow other related articles on the PHP Chinese website!