According to the specs, the latter rule should take precedence over the former. Indeed, if you switch the rules around the div shows red in "modern" browsers.

However, Opera (prior to 8) and all versions of Internet Explorer (PC and Mac) do things a little different. They seem to distinguish between elements with the same specificity, giving some kind of additional fuzzy weighting depending on the last part of the rule, eg tag beats id without tag beats class without tag beats universal selector.

So the method pans out like this:

Create two rules with the same specificity

Place the rule for Opera and IE first

Make sure that first rule has a more "fuzzily" specific final part.
eg. .foo div beats div.foo *

[Is this a known way to hack IE? Surely I just can't mix the right googlejuice to summon it up. Whatever, it's way more complex and subtle than pre-existing IE hacks so it's just a potentially useful side-effect rather than a serious replacement]

NB. This bug still affects IE7.

Hacking just for Opera 7.54 and below (er, and IE7)

Anyhow, if we only want to feed rules to old versions of Opera and exclude IE, then we need to tweak the rules a little more. Fortunately that's pretty trivial...

B. <div id="op7-hook-id"><div class="target-class"> ... </div></div>
This div shows red in Opera 7.54 and under but shows blue in all other browsers (except IE7).

Hacking just for Opera 7.54 and below (again)

Well, it was trivial to exlude IE, but the beta version of IE7 has changed all that. When IE7 actually comes out this may all change, but for now all we need to do (snore) is add an extra declaration with a CSS3 selector that IE7 can understand.

B1. <div id="op7A-hook-id"><div class="target-class"> ... </div></div>
This div shows red in Opera 7.54 and under but shows blue in all other browsers.

Hacking just for IE7

Returning to IE7, until Microsoft fixes the fuzzy specificity bug (it has been reported), you could use it as the basis for a IE7-only flter. The two following rules have the same specificity, but the first one is fuzzily weighted, but only IE7 can see it since it relies on a CSS3 selector.

Z. <div id="ie7-hook-id"><div class="target-class"> ... </div></div>
This div shows red in IE7 but shows blue in all other browsers.