Ответ: Невозможно реализовать такую выборку через обычный css селектор.
Каждый элемент в доме входит в "список сиблингов" (яхз как нормально перевести list of siblings), т.е. список таких нод, которые являются прямыми потомками для одной родительской ноды.
Все
структурные псевдо-классы (:nth-child, :nth-of-type, etc) работают именно со списком таких нод, т.е. выставляя любом селектору псевдокласс ":nth-child()" вы выбираете только те элементы, для позиции которых в списке сиблингов верна заданная в nth-child формула.
На примере:
.child:nth-child(1) { color: red; }
не окрасит ни один элемент, по той причине, что ни один .child элемент не является первым в списке сбилнгов; однако,
.child:nth-child(4) { color: red; }
окрасит самый первый элемент с классом .child в приведенном ТС примере, т.к. он является 4 элементов в списке своих сиблингов.
Вывод: без js вы не сможете сделать такую выборку. Я вижу два решения: 1) вы окрашиваете на стороне клиента эти элементы через js, 2) вы рассчитываете на стороне бека, какой из элементов является четным и добавляете ему класс .child--view--even, который в стилях будет окрашивать ваш элемент в красный цвет.
Для фронта:
(() => {
const elements = document.getElementsByClassName('child');
const rec = (arr) => {
if(!arr.length) return;
const [even, odd, ...rest] = arr;
even.setAttribute('style', 'color: red');
return rec(rest);
}
rec(elements);
return;
})();
ps если вы будете использовать мой пример в чистом виде, то лучше его
отбабелить