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

Pure CSS implements the color alternation of element color

This article introduces how to use pure CSS to achieve the effect of alternating element colors in n%3 mode based on element index. This technique is very useful when creating visually appealing lists or grid layouts.

Suppose we have the following HTML structure:

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

And CSS variable definition:

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

Our goal is to make each<p> The background color of the element changes cyclically according to the remainder of <code>n%3 :

• Element 1: --color1
• Element 2: --color2
• Element 3: --color3
• Element 4: --color1
• And so on...

CSS' nth-child pseudo-class can achieve this. By cleverly applying nth-child 's syntax, we can select specific elements and apply different styles.

Solution:

 .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);
}

This CSS code utilizes nth-child(3n x) selector:

• 3n 1 Select all indexes divided by 3 remainder 1 (1, 4, 7, ...)
• 3n 2 2Select all indexes divided by 3 elements with remainder of 2 (2, 5, 8, ...)
• 3n 3 Select all indexes divided by 3 elements with remainder of 0 (3, 6, 9, ...)

Through the above CSS code, we successfully implemented it<p> The circular alternating effect of element background colors meets <code>n%3 mode requirements. This method is simple and efficient, and is fully implemented using pure CSS, avoiding the additional overhead of JavaScript.

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