3

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

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

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

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

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

введите сюда описание изображения

  • Эм.. А где они должны быть? – Qwertiy Feb 11 '19 at 14:25
  • @Qwertiy Дочерние блоки в контейнере, а манипулировать хочу свойством background, добавил пример разметки –  Feb 11 '19 at 14:28
  • Я имел в виду, где на шахматной доске должны оказаться чёрные блоки подряд? UPDATE: А, понял. – Qwertiy Feb 11 '19 at 14:49
  • Кстати, в тему: https://ru.stackoverflow.com/a/597824/178988 – Qwertiy Feb 11 '19 at 14:51

1 Answers1

4

Вот пример:

.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;
}
  <div class="container">
    <h1>Шахматы</h1>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
dmshm
  • 326