What is the replacement for the child selector?

Question

Since IE6 does not support the child selector (see http://kimblim.dk/csstest/#ex1), what is the alternative when dealing with this browser?

I do not want to modify the m

Answer 1

Here is a good solution I have found in a book: "The Anthology of Javascript"

Something like that:

/* for all but IE */
#nav ul li.currentpage > a:hover {
  background-color: #eff;
}

And the code to cater for IE:

/* for IE */
* html #nav ul li.currentpage a:hover {
  background-color: expression(/currentpage/.test(this.parentNode.className)? "#eff" : "#ef0");
}

The hack for IE is that only IE thinks that there is a wrapper over html, and IE does support the expression() stuff.

The expression uses a regular expression (/currentpage/), and tests it against the class of the parent node, so the direct children of the element li.currentpage will be set to #eff, the other descendants will be set to #ef0.

Note that the colours used are fake, please do not comment on them ;-)

Answer 2

Putting a custom class on the element.

<ul>
<li class="first">Blah<li>
<li>Blah<li>
<li>Blah<li>
</ul>