Кирилл Матросов

Обратимся к документации CSS.
Псевдокласс nth-child определяет состояние элемента по соседям слева (before), соседей может быть 0. Тип узла-элемента не играет роли (текстовые узлы игнорируются).
Поэтому 0 и 4 имеют один цвет, так как 0 получает красный, как первый в div, а 4й (он же пятый, если считать от 1цы) так же красный, так как в его случае nth-child учитывает 4х соседей слева.

Как сделать с помощью nth-child я не могу придумать)
Я бы сделал таким образом с помощью nth-of-type , который так же определяет по соседям слева, но учитывая тип первого узла, который получил этот класс. + обернул то, что надо пропустить в div.
В примере ниже у узлов один и тот же класс, но псевдокласс будет окрашивать их по типу

.test:nth-of-type(odd) {
  background-color: red;
}

<div> 
    <div class="test">div</div>
    <p class="test">p</p>
    <p class="test">p</p>
    <div class="test">div</div>
    <p class="test">p</p>
    <div class="test">div</div>
    <ul class="test">ul</ul>
    <div class="test">div</div>
</div>