Добрый день. Происходит так потому, что при использовании nth-child он смотрит на всех детей родительского контейнера. Добавив имя класса Вы лишь указываете что если ребёнок подходит под прогрессию(чётное) И одновременно с этим имеет указанный класс, то окрась. И таким образом получается, что 0 и 4 элементы рассматриваются как чётные, потому что в дереве документа так оно и есть. Если Вы добавите класс .p к p с номером 2 то увидите наглядно. Или же можете добавить ещё один элемент P без класса и тогда элемент 4 покрасится в зелёный потому что в дереве он станет не чётным.
Перепробовал через nth-child с комбинациями :not и :first-child и тоже что-то не придумалось особо.
Варианты решения:
1) Обработка на JS;
Делать выборку всех элементов с определённым классом и уже там их перекрашивать по чётности или не чётности, но в идеале добавлять модификатор, что-то вроде:
Найди все .p, к чётным добавь класс p_odd, к нечётным p_even
2) Выводить эти элементы изначально с другим классом-модификатором.
