It takes advantage of an unusual combination of implementations – IE7 and Opera 9 support CSS3 substring-matching attribute selectors, but they don’t support the negation pseudo-class; other current browsers which support one or the other, support them both. We can further distinguish Opera 9 from IE7 by the former’s support for CSS3 media queries.
The CSS looks like this:
p.test { color:red; }
p[id$="test"] { color:green; }
p[id$="test"]:not([class="xxx"]) { color:red; }
@media all and (min-width:0px) { p[id$="test"] { color:red; } }
which applies to this sample HTML:
‹p class=”test” id=”test”›
This text will be green if the rule has been applied.
‹/p›
The first rule applies to all modern browsers. The second rule applies to any which support substring-matching attribute selectors, which is Mozilla, Safari, Konqueror, Opera 9 and IE7. The third rule applies to browsers which support both the attribute selector and the negation pseudo-class, which is Mozilla, Safari and Konqueror. This leaves IE7 and Opera 9, so the fourth rule uses a CSS3 media query to negate the style for Opera 7.
Credit goes to Brother Cake and David “liorean” Andersson for discovering this.