It doesn't work because what you said to the browser was (for the red case, the blue one is similar):

1. Locate all elements .red.
2. From that list of .red elements, pick the first one (first-child).
3. Apply the red color to it.

The browser works as expected and apply the red color to the first element of the list.

It doesn't work because what you said to the browser was (for the red case, the blue one is similar):

1. Locate all elements .red.
2. From that list of .red elements, pick the first one (first-child).
3. Apply the red color to it.

The browser works as expected and apply the red color to the first element of the list.

EDIT:

The blue case is due to the fact that CSS always looks for the most precise rule. If both rules has the same precision level, the last one wins, so in this case, the last .blue:last-child wins and the .blue:first-child is ignored.