Первый элемент стиля CSS в зависимости от количества братьев и сестер

Question

Я получаю динамическое количество предметов из бэкэнда.

В случае, если это нечетное количество предметов, первый должен быть единственным в первом ряду.

Все остальные должны бытьотображается по два на каждую строку.То же самое, если это четное количество элементов - ни одного элемента в любой строке.

Я настоятельно думаю, что есть какой-то способ сделать это только с помощью CSS (я бы легко решил это с помощью JS, но предпочел бы подход CSS).) Я просто не смог найти правильную комбинацию.

HTML:

<div class="row">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
  <div class="col">D</div>
</div>

CSS:

.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
  flex: 0 0 50%;
  background: gray;
  text-align: center;
}
.col:first-child { // should only hit for an odd amount of items
  flex: 0 0 100%;
}

Codepen

Answer 1

Да, это возможно с помощью следующего CSS:

.col:first-child:nth-last-child(odd) {
  flex: 0 0 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
  flex: 0 0 50%;
  background: gray;
  text-align: center;
}

.col:first-child:nth-last-child(odd) {
  flex: 0 0 100%; // should only hit for an odd amount of items
}

<p>Even</p>
<div class="row">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
</div>

<p>Odd</p>
<div class="row">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col">E</div>
</div>

Также посмотрите этот связанный пост: Может ли CSS определить количество дочерних элементов?