All versions of IE? Yep. IE8b1 is the latest in a long line of givers of love to the fuzzy. Anything about IE7 on this page is currently true of IE8b1.
.fuzzy-hook-class div { background: #ff0000; } div.fuzzy-hook-class * { background: #0000ff; }
.fuzzy-hook-class
= a-0 b-1 c-0, div
= a-0 b-0 c-1 => specificity = a-0 b-1 c-1
div.fuzzy-hook-class
= a-0 b-1 c-1, *
= a-0 b-0 c-0 => specificity = a-0 b-1 c-1
have exactly the same specificity.
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:
.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.
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...
#op7-hook-id > div.target-class { /*\*/ background: #ff0000; /**/ } div#op7-hook-id *.target-class { background: #0000ff; }
Alternatively, if there are no suitable hooks in the html to hang the Child Selector off that IE (PC) can't see, we could simply redeclare the rule and hide it with the Star HTML Selector hack.
In either case, IE5 (Mac) will need extra treatment - here, the perennial favourite, the Escaped Comment End hack.
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.
#op7A-hook-id > div.target-class { /*\*/ background: #ff0000; /**/ } div#op7A-hook-id *.target-class { background: #0000ff; } #op7A-hook-id[id^="op7A-hook-id"] > div.target-class { background: #0000ff; }
Moving on, applying the same kind of trick inside a media query block, yields a hack that targets Opera 8 and above.
div#op8andup-hook-id { background: #0000ff; } @media all and (min-width: 0px) { body #op8andup-hook-id { background: #ff0000; } }
NB. Safari and Firefox will one day (and probably not a particularly distant one at that) roll out support for media queries.
Should that happen, then currently there are 3 hacks that Opera still doesn't get:
So the relevant CSS could be tweaked something like this (assuming the :root Selector method still works).
div#op8andup-hook-id { background: #0000ff; } @media all and (min-width: 0px) { body #op8andup-hook-id { background: #ff0000; } :root body #op8andup-hook-id { background: #0000ff; } }
Applying a CSS3 selector to the previous example results in a hack that targets just Opera 8. (Hat tip to Philippe Wittenberg for this one)
div#op8-hook-id { background: #0000ff; } @media all and (min-width: 0px) { body #op8-hook-id { background: #ff0000; } body #op8-hook-id[id^="op8-hook-id"] { background: #0000ff; } }
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.
#ie7-hook-id div[class^="target-class"] { background: #ff0000; } div#ie7-hook-id .target-class { background: #0000ff; }
And more compactly, switching out the parent selector for the omnipresent body
element...
* div[class^="ie7-target-class"] { background: #ff0000; } body .ie7-target-class { background: #0000ff; }
You may also want to peruse Brothercake's XXX hack for other ideas.
And yes I do know that the IE7 team strongly discourage the use of CSS filters/hacks and recommend conditional comments instead.