My favourite CSS hack

Wednesday 6 August 2008

Normally, I try not to use hacks, because they are… hacks, but there are sometimes irritating problems in IE that just won’t go away, like the overflow:visible bug in IE 6.

So, we have to resort to something that will allow a CSS selector to be read only in IE 6 and below.

Enter the star (*) hack. It is cool, primarily because it is valid, but also because it is more logical than some of its weirder contemporaries.

In IE 6 and its microsoft predecessors, there is a strange “element” that surrounds your html node – the <*> element. This doesn’t occur in other browsers, so to use the star hack all you have to do is place the asterisk character followed by the html tag, and then your normal selectors. For example:

.myclass {
  /* these properties will be parsed by all browsers */
}
* html .myclass {
  /* these properties will only be read in IE lte 6! */
}

Because the * is a valid CSS selector (but meaning “all children”, not as a tag), this CSS code will still validate perfectly. And it works!