Question

I have a table with some rows:

<table>
    <tr class="even"><td>tr0</td></tr>
    <tr><td>tr1</td></tr>
    <tr class="even"><td>tr2</td></tr>
</table>

I have a CSS rule (rule1) for even rows:

.even{
    background-color: blue;
}

I have another rule (rule2) for override the bgcolor of any row:

.override, .override.even{
    background-color: green;
}

The weird thing is in IE9 all even rows (with no override class) are green!
Developer tools shows this for even rows:

In these two conditions IE do the job correctly:

If I rewrite rule2 like this:

.override, .override .even{ ... }

If I move rule2 above rule1:

.override, .override.even{ ... }
.even { ... }

Question is what’s the difference between .override.even and .override .even?

EDIT:

Thanks for replies. Another question which I forgot to ask is why IE shows the even rows green?

Answer 1

Spacing in between class specifiers means a ascendant -> descendant relationship.

The rule:

.test .heading { font-weight: bold; }

Would apply to the <p> element here:

<span class="test"><p class="heading">Something</p></span>

The lack of space means that the element must have both classes for the rule to apply.

The rule:

.heading.major { color: blue; }

Would apply to the <p> element here:

<p class="heading major">Major heading</p>