Как выбрать первые два элемента, пропустить два элемента и снова выбрать два элемента?

#html #css

Как с помощью nth-child можно выбрать первые два элемента, пропустить два элемента
и снова выбрать два элемента? Выборка по два, пропуск по два.


    
выбран
    
выбран

    
пропуск
    
пропуск

    
выбран
    
выбран

    
пропуск
    
пропуск


    

Ответы

Ответ 1

li {
  border-bottom: #000 solid 1px;
}

li:nth-child(4n-3),
li:nth-child(4n-2) {
  background: #f00;
}

  

  

  

  

  

  

  

  




Ответ 2

Например вот так:



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

iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii



Ответ 3

*{
  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;
}