This question has already been answered:

Tell me how to set with the help of nth-child let's admit certain styles to the li tag in the following sequence:

  • 1,2 li should have the same styles,
  • 3,4 li other styles. And so on in the loop, li tags can be many

Reported as a duplicate by Visman members, Nick Volynkin ♦ Jul 5 '17 at 4:59 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

    2 answers 2

     ul li{ color:red; } ul li:nth-child(4n-1), ul li:nth-child(4n){ color:blue; } 
     <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> 

       li { background: blue; color: white; } li:nth-child(4n+1), li:nth-child(4n+2) { background: red; } 
       <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>

      • @Cheg, by the way, you need to add more controllability for li to the code, i.e. let's say for the 1st and 2nd li some of the same styles, but for the 1st li, you need to set your own styles, different from other li. The same is true for the rest of the 3rd and 4th li - word
      • tell me how to implement it correctly? those. suppose there is another paragraph in the li tag. And in a certain sequence, you need to alternate styles for specific li and paragraphs. But to be repeated every 4 li - word
      • @word well, apparently for li:nth-child(4n+1) below you also register additional styles different from li:nth-child(4n+2) ... for 3/4 too ... but it’s better to ask a new question where clearly show what is there, what I want to be and how it happens. - Alexey Shimansky