Как выбирать блоки в шахматном порядке через nth-child?

Question

Мне нужно выбирать каждый второй блок первого ряда а потом 1 и 3 блок второго ряда, в шахматном порядке. Подскажите, как это сделать?

Answer 1

CSS

.col {
  width: 100px;
  height: 40px;
  display: inline-block;
  border: solid 2px black
}
.row:nth-child(odd) .col:nth-child(odd) {
  background: black;
}

.row:nth-child(even) .col:nth-child(even) {
  background: black;
}

HTML

<div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>

Answer 2

К сожалению, более красивого решения придумать не удалось, поскольку функция :nth-child() принимает только простые выражения, последовательность -1 - 2 (-1)^(2n) + (-1)^(1 + n) + 4n туда ввести нельзя.

section {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
}
div {
  border: 1px solid;
  background-color: blue;
}

div:nth-child(5n),
div:nth-child(5n-3),
div:nth-child(4){
    background: black;
}

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

Answer 3

Есть идея как это реализовать с фоном у обертки - можно сделать шахматку при помощи конического градиента.

В удивительное время живем! :-)

section {
  --cell-size: 100px;
  display: inline-grid;
  grid-template-columns: repeat(4, var(--cell-size));
  grid-auto-rows: var(--cell-size);
  background-image: repeating-conic-gradient(black 0% 25%, blue 0% 50%);
  background-size: calc(var(--cell-size) * 2) calc(var(--cell-size) * 2);
  background-position: 0 0;
}

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

БЛОГ НА HUSL

Как выбирать блоки в шахматном порядке через nth-child?

Ответы (3 шт):