New way to hover and first-child in IE6

Hi, i'm back

Now, i show a new way to simulate pseudo-class first-child and hover in IE6 with a diferent method. No HTC, no tag script, no external file.

The advantage of my new code is that can be inserted directly in CSS and not needs another file. The idea of "expression" can be used to other implementations :).

Micox Pseudo-class-css2 to IE (MXPC)

/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6 */
* html * { color: expression( (function(who){ if(!who.MXPC){
 who.MXPC = '1';
 if(who.nodeName != 'A'){
  who.onmouseenter=function(){ who.className += ' hover'};
  who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
 (who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }

/* example */
p:first-child , p.first-child { color: red }
li:hover a , li.hover a { background-color: blue }

How to use? Just put on top of your css code and use classes .hover and .first-child with the :hover and :first-child. See a online EXAMPLE page and code source.

p:hover , p.hover { color: red }

Comments please.


  1. love it.. no JS needed.. but this increases page load time... for extra speed target the specific block only.

  2. Hm, a bit complicated solution, a simple redraw trigger would do.
    Change background, color or border property on a:hover and this would trigger ie to redraw and display child properly.

  3. would there be a way to put this into an external .htc file and use it on all :first-child selectors, independent on the css-property one uses? (not only color but all things, margin, padding...)