nth-child, сменить background

#css3

встретилась такая интересная задачка.

Как можно реализовать такое с помощью nth-child?
подобие шахматной доски, как написать правильную выборку?

Через один элемент это понятно (2n), но как быть с моментом когда должны быть 2 черных
квадрата подряд. Заранее спасибо


    

    

    

    

    

    

    

    




UPD: Блоков может быть больше, от этого не должно все поломаться.


    

Ответы

Ответ 1

Вот пример:



.container {
  width: 180px;
  margin: 0 auto;
  text-align: center;
}

.container div{
  width: 20px;
  height: 20px;
  float: left;
  border: 1px solid rgba(118, 118, 118, 0.14);
}

.container div:nth-child(16n+3), .container div:nth-child(16n+9),
.container div:nth-child(16n+5), .container div:nth-child(16n+7),
.container div:nth-child(16n+10), .container div:nth-child(16n+12),
.container div:nth-child(16n+14), .container div:nth-child(16n+16) {
  background-color: black;
}
  

    
Шахматы