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: Блоков может быть больше, от этого не должно все поломаться.

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

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

1 ответ 1

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>

1
  • 1
    Благодарю, то что нужно
    – user298256
    11 фев 2019 в 14:39

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.