The Triple-X hack - an exclusive CSS filter for IE7

This text will be green if the rule has been applied.

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; } }

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.

Crucially here, since the class name of the element does not contain the substring "xxx", the third rule is duly applied in those browsers. But since IE7 and Opera 9 support the attribute selector but not the negation, they don't apply the rule.

So, the filter can be used in this combination, to apply and then negate particular styles for IE7. Or the last two rules can be used on their own or with other hacks, to hide from IE7 styles that are only intended for Mozilla, Safari, Konqueror, or Opera 9.

An alternative is to do this:

p.test { color:red; }

p[id$="test"] { color:green; }

html[xmlns] p[id$="test"] { color:red; }

In this case, the third rule is applied by every browser which supports the attribute selector, apart from IE7. It would equally work with html[lang] or another attribute of the html tag, but in both cases it relies on knowing what kind of document it will be used on, so in production use I would favor the original hack, verbose as it is.