Why is this CSS rule not being hit?

Question

I'm trying to make a little exception visualizer that works with nested exceptions. It's rendering nicely, except for one thing:

.validation-summary-errors span.exception-messsage {
    font-weight: bold;
    display: block;
}

The above CSS rule is not being applied. Any idea why?

Here's the code: http://jsfiddle.net/cabichandani/yF7KP/2/

Update: I'd be embarrassed if it weren't for the fact that I am SO DELIGHTED to have this fixed. The extra "s" evaded me for maybe a half hour!

Answer 1

Change meSSSage to meSSage :

.validation-summary-errors span.exception-messsage 

to

.validation-summary-errors span.exception-message

Answer 2

Three 's' in message in your stylesheet, your html isn't pointing to the correct class/your css class is named incorrectly in reference to your html!

.validation-summary-errors span.exception-messsage {
    font-weight: bold;
    display: block;
}

Answer 3

Extra s.

exception-message vs exception-mess*s*age