Почему не срабатывает :nth-child?
<div>
  <p class="foo"></p>
  <p class="foo"></p>

  <p class="bar"></p>
  <p class="bar bar--yellow"></p>
  <p class="bar bar--yellow"></p>
  <p class="bar"></p>
</div>.bar--yellow {
    color: yellow;
}
Или как выше уже написали.bar:nth-child(4),
.bar:nth-child(5) {
  color: yellow;
}
Первый вариант надежнее, так как, если у вас поменяется количество элементов, то не придется переписывать стили.
Потому что nth считает по дереву, а не по селектору. А селектор - это доп. условие, т.е. И 3 по дереву, И .bar класс, что, естественно, не соответсвует вашему условию.
Костыльное решение: codepen.io/anon/pen/QKzXoq