Why .class-name-1.class-name-2:first-child does not work?

Question

I wrote this simple code today, and I have no idea why this combination of styles does not work.

.current { background: blue; }
.current.past:first-child { background: red }

<ul>
  <li class="current">1 asd</li>
  <li class="current">2 asd</li>
  <li class="current">3 asd</li>
  <li class="current past">4 asd</li>
  <li class="current past">5 asd</li>
</ul>

Anybody cares to explain?