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 markup, and I'd much much prefer a CSS-only solution...

And yes, it is the direct child that I wish to target.

Thanks!

Answer 1

I've come across something of a hack: http://meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement/ Using the 'star html' hack for IE (6 and below) in combination with this allows me to select the direct child. Let's say we want to apply a padding-top of 10px to the direct child, F, of E:

* html body E F
{
    /* apply style here for IE 6 */
    padding-top: 10px;
    /* This applies the style to every F inside of E */
}
* html body E * F
{
    /* undo style here */
    padding-top: 0px;
    /* This will undo the style set above for every F that has something in between itself and E, that is, every F besides the direct children of E */
}

I do appreciate your responses so far but as much as I hate to accept my own answer, this was the solution I eventually settled on. Thanks guys!

Answer 2

You can use jQuery, not a pretty solution, but it is one option that I have used in the past:

$("parent > child").each(function() {
    $(this).addClass("child-styles");
}

You are obviously going to want to wrap this in some specialized IE6 only check. And probably want a style sheet wrapped in the IE6 IF statement to add these specialized styles.