How can nth-child select the first two elements, skip two elements and select two elements again? A sample of two, two passes.

 <ul> <li>выбран</li> <li>выбран</li> <li>пропуск</li> <li>пропуск</li> <li>выбран</li> <li>выбран</li> <li>пропуск</li> <li>пропуск</li> </ul>

    3 answers 3

     li { border-bottom: #000 solid 1px; } li:nth-child(4n-3), li:nth-child(4n-2) { background: #f00; } 
     <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

      For example, like this:

       i{ display:inline-block; padding:.5rem; margin:.5rem; background-color:green; } div i:nth-child(4n+1), div i:nth-child(4n+2){ background-color:red; } 
       <div> <i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i><i>i</i> </div> 

         *{ padding: 0; margin: 0; } ol{ text-align: center; counter-reset: count; display: flex; flex-wrap: wrap; } li { background: #00f; margin-bottom: 1px; list-style: none; padding: 15px; color: #fff; margin: 1px; } li:before{ counter-increment: count; content: "Item " counter(count) " "; } li:nth-child(4n+3), /* отсчет от 3 элемента + 4 */ li:nth-child(4n+4) /* отсчет от 4 элемента + 4 */ { background: #f00; } 
         <ol> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol>