Web Front-endCSS TutorialHow to use pure CSS to achieve the effect of alternating element colors by n%3?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!
How to use the mix-blend-mode property in CSSAug 29, 2025 am 07:37 AMmix-blend-mode controls the mixing method of the content of the element and the color of the behind element. 1. There must be a background (such as picture or color) to show the effect; 2. Commonly used values such as multiply and screen can achieve text hollowing or image superposition; 3. Pay attention to stacking context to avoid parent isolation:isolate from preventing mixing; 4. Avoid overuse in performance, especially in large elements or animations; 5. Modern browsers have good support, suitable for creating text effects, image filters, hover interactions and artistic layouts. It is recommended to get started with multiply and screen and combine high-contrast background to test the effect.
How to create a two-column layout in CSSAug 29, 2025 am 07:31 AMUse Flexbox or CSSGrid to create two-column layouts. 1. Flexbox implements the same width column by setting the container display:flex and child element flex:1. Different flex values can be used to control the width ratio and use gap to add spacing; 2. Grid defines two-level columns through display:grid and grid-template-columns:1fr1fr, which also supports gap and responsive adjustment; 3. In responsive scenarios, set flex-direction:column or grid-template-columns:1fr on the small screen through media query to make the columns stack vertically. Both methods are modern browsers
How to create a fixed header in CSSAug 29, 2025 am 06:48 AMUseposition:fixedontheheaderwithtop:0andwidth:100%topinittothetopoftheviewport.2.Applyz-index:1000toensuretheheaderstaysaboveothercontent.3.Addpadding-toptothebodyormaincontainerequaltotheheader’sheighttopreventcontentfrombeinghiddenbehindit.4.Ensure
How to use the :hover pseudo-class in CSSAug 29, 2025 am 05:44 AM:hover pseudo-class is used to apply styles when hovering. 1. The basic syntax is selector:hover{property:value;}, such as a:hover{color:red;}; 2. Common uses include changing colors, adding underscores, scaling elements, and displaying hidden content; 3. The best practice is to cooperate with transition to achieve smoothing effects, ensure accessibility, avoid over-dependence on the mobile side, and avoid abuse; 4. Advanced usage includes making one element's hover affect another element through a sibling selector, and nested hover effects for drop-down menus. Correct use: hover can improve interactivity, while paying attention to simplicity, accessibility and user experience.
How to use the :in-range and :out-of-range pseudo-classes in CSSAug 29, 2025 am 05:19 AM:in-range and :out-of-range are CSS pseudo-classes that are used to style form elements with min and max attributes based on whether the input value is within the specified range; 2. They are only suitable for input types that support range limitations, such as number, range, date, etc.; 3. When the input value is within the range, use:out-of-range when it is out of range, and use:out-of-range when it is out of range, and the style is dynamically updated in real time; 4. These pseudo-classes are independent of :valid or :invalid, but can be used in conjunction with them to enhance form feedback; 5. Error messages can be displayed in conjunction with: focus or adjacent selectors to improve user experience, and can be intuitively implemented without JavaScript.
How to center an element with a fixed width in CSSAug 29, 2025 am 04:57 AMUsemargin:0autotocenterafixed-widthblockelementhorizontally,whichworksreliablyacrossallbrowsersandrequiresonlytwoCSSproperties:afixedwidthandautomatichorizontalmargins.2.Forinlineorinline-blockelements,applytext-align:centerontheparentcontainertoachi
How to create a 'broken' grid layout with CSS Grid?Aug 29, 2025 am 04:21 AMUse grid-template-columns to create a responsive basic grid with flexible units; 2. Use grid-column and grid-row to control the alignment of specific elements across columns or offset positions; 3. Use negative margins and z-index to achieve overlapping or staggered visual hierarchy; 4. Use grid-template-areas to define irregular layout areas to achieve complex structures; 5. Use justify-self or align-self to adjust the alignment of individual elements to create asymmetry; 6. Use media queries to maintain intentional misalignment effect on different screens; pay attention to controlling the degree of breaking, maintaining readability, making good use of white space and multi-end tests to achieve design-sensible non-design
How to use CSS countersAug 28, 2025 am 08:15 AMCSScountersallowautomaticnumberingofelementsviaCSSbyinitializingwithcounter-reset,incrementingwithcounter-increment,anddisplayingviacontentinpseudo-elements;theysupportnestednumbering(e.g.,1.1,1.2),customstyles(likeupper-romanordecimal-leading-zero),
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
Zend Studio 13.0.1
Powerful PHP integrated development environment
SublimeText3 Mac version
God-level code editing software (SublimeText3)
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
