Установите четную четную сетку из 4 столбцов, используя nth-child, и выберите пункты 2, 4, 5, 7, 10, 12, 13, 15, 18, 20.

Question

Я добавил статический код для того, чего я пытаюсь достичь, но мне нужно, чтобы он был динамическим, чтобы я мог обнаружить этих детей 2, 4, 5, 7, 10, 12, 13, 15, 18, 20 ..используя "nth-child".Все дочерние элементы должны находиться в одном родительском элементе div, а не в разных строках div.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Я создаю что-то похожее на структуру выше и хотел применить тот же фон к жирному тексту, используя только nth-child.

.PlayersGridItem__row {
  display: flex;
  width:100%;
  flex-wrap: wrap;
}
.PlayersGridItem__item {
  width: 25%;
  position: relative;
  border:1px solid red;
  background: #cccccc;
  padding: 30px;
  box-sizing:border-box;
}
.PlayersGridItem__item:nth-child(2)
  {
  background:#FFF;
  }
  
  .PlayersGridItem__item:nth-child(4)
  {
  background:#FFF;
  }
  
.PlayersGridItem__item:nth-child(5)
  {
  background:#FFF;
  }
  
.PlayersGridItem__item:nth-child(7)
  {
  background:#FFF;
  }

<div class="PlayersGridItem__row">
            <div class="PlayersGridItem__item">
              <div class="PlayersGridItem__player-name">
                Noah Andrews
              </div>

            </div>
            <div class="PlayersGridItem__item">
              <div class="PlayersGridItem__player-name">
                Noah Andrews
              </div>

            </div>
            <div class="PlayersGridItem__item">
              <div class="PlayersGridItem__player-name">
                Noah Andrews
              </div>

            </div>
            <div class="PlayersGridItem__item">
              <div class="PlayersGridItem__player-name">
                Noah Andrews
              </div>
            </div>
            <div class="PlayersGridItem__item">
              <div class="PlayersGridItem__player-name">
                Noah Andrews
              </div>

            </div>
            <div class="PlayersGridItem__item">
              <div class="PlayersGridItem__player-name">
                Noah Andrews
              </div>

            </div>
            <div class="PlayersGridItem__item">
              <div class="PlayersGridItem__player-name">
                Noah Andrews
              </div>

            </div>
            <div class="PlayersGridItem__item">
              <div class="PlayersGridItem__player-name">
                Noah Andrews
              </div>
            </div>
          </div>

Answer 1

Вы можете попробовать нацелить нечетные / четные строки и их нечетные / четные дочерние элементы.Предполагая, что каждая строка чисел является отдельным .row, а каждое число является .column:

.row:nth-child(odd) .column:nth-child(even),
.row:nth-child(even) .column:nth-child(odd) {
    background-color: blue;
}