Precedence of multiple classes defining color property being set by declaration order rather than specification order

Question

Given two classes of equal specificity defining the color property I thought the last class listed in the element class attribute would take precedence.

From http://htmlhelp.com/reference/css/structure.html:

Order of Specification To make it easy, when two rules have the same weight, the last rule specified wins.

In the following vacuum code example the order in which the class rule set is defined determines precedence. Here the last, or most recent, class rule set definition takes precedence.

<style>
    .makeBlue {color: blue;}
    .makeGreen {color:green;}
</style>
<div>
    <p class="makeGreen makeBlue">makeGreen makeBlue</p>
    <p class="makeBlue makeGreen">makeBlue makeGreen</p>
</div>

The output text is green.

If I swap the order of class declaration, and declare .makeGreen first

<style>
    .makeGreen {color:green;}
    .makeBlue {color: blue;}        
</style>
<div>
    <p class="makeGreen makeBlue">makeGreen makeBlue</p>
    <p class="makeBlue makeGreen">makeBlue makeGreen</p>
</div>

The output text is blue.

I've never noticed this before. edit I thought edit the last class listed in the element class attribute takes precedence.

edit To clarify --> I sometimes think of an element as a pet, let's say a dog. I see adding a class to the element's class attribute as issuing the dog a command. If I tell it to sit, and later tell it lie down, I expect the dog to lie down. I do not expect the dog to remain sitting simply because I taught it how to sit after (more recently than) I taught it how to lie down.

So... two questions.

1. Is this how it is supposed to be? answered
2. If so... why? I am unable to see the advantage of having to dig through class declarations in order to determine which was declared before the other.

Much thanks!

Answer 1

The order of the classes as you specify them on the elements is irrelevant. It's the order that you define them in your style declarations that matters. The quote you posted means in the style declarations, not the order the classes are listed on the elements.