This blog entry is the companion page to IE7 only CSS Hacks: Explained which elaborates on how and why these hacks work. Feel free to open this page up in IE7, IE6, Opera and Firefox on the PC, and Safari and Opera on the Mac.
<![CDATA[</p>
<div lang="en" align="left">
<!-- useless comment --></p>
<div>
<h2>The Star(*) hack</h2>
<p class="starHack">body>div .myClass { *color: #CC33CC; }</p>
<h2>The conditional comment</h2>
<p class="conditional"> <!–[if IE 7]><br />
<style type="text/css"><br />
p.conditional {color: #CC33CC;}<br />
</style><br />
<![endif]–></p>
<h2>The LANG filter</h2>
<p class="item">.item {color: #000000;}<br />
html>div .item {color: #CC33CC;}<br />
*:lang(en) .item{color: #666666;}<br />
.item:empty {color: #666666 !important} </p>
<p><div lang="en"><br />
<p class="item"><br />
This will purple in IE7, grey in Firefox and black in IE6</p>
<h2>Triple X Hack</h2>
<p class="testx" id="testy">.testx { color: #000000; }<br />
p[id$="testy"] { color:#cc33cc; }<br />
p[id$="testy"]:not([class="xxx"]) { color:#666666; }<br />
@media all and (min-width:0px) { p[id$="testy"] { color:#aaaaaa; } }</p>
<p>This will purple in IE7, grey in Firefox and black in IE6</p>
<h2 id="case">The Case Sensitive Attribute Hack</h2>
<p class="casesensitive">p.casesensitive {color: #000000;} <br />
div[align~=left] p.casesensitive {color: #cc33cc;}<br />
<br />
div[align~=LEFT] p.casesensitive {color: #666666;} </p>
<p class="casesensitive"><div align="left"> <p class="casesensitive"><br />
This will purple in IE7, grey in Firefox and black in IE6</p></p>
<h2>Aimsterloo Hack<br />
a.k.a.<br />
First Child Comment Hack</h2>
<p class="fchild">p.fchild {color: #000000;}<br />
html>div p.fchild {<span class="casesensitive">color: #cc33cc;</span>}<br />
div :first-child p.fchild {color: #666666;} </p>
<p><div><!– useless comment –><div><p class="fchild"><br />
The div should be the first child of the div, but in IE it isn’t…
</p>
</div>
</div>
<p>]]>
The above content is in an iFrame due to need to control the body attributes. So, if you want to see the code, right click in the middle of the content and select view from source. You can also view just the guts at http://www.evotech.net/articles/IE7hacksamples.html
There’s also *+html {} which works exactly equivalent to IE6’s * html {}. (That is, no decent browser will ever match it, as it simply can’t match anything in the DOM tree of any actual HTML document.)
Some people use *html.classSelector {}
please explain what is use of it
*:first-child+html .myclasSelector{} Valid css hacks only For IE7
* html .myclasSelector{ } Valid css hacks only For IE6 nad below
Thanks for the expert recommendations! The ie7 hack is working and resolved, FINALLY.