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

This post discusses all of the different options for emulating CSS child selectors in IE6, including a little trick at the end to work with nested structures: http://craftycode.wordpress.com/2010/05/19/emulating-css-child-selectors-in-ie6/

Answer 2

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 3

Use this

div * { padding-left:20px; }
div * * { padding-left:0; }

First you target all children, and then you reset the css declaration by targeting all grandchildren.

Answer 4

A cross-browser solution that I have used is the following. It doesn't use IE6 hacks and displays embedded lists correctly (say you need to style OL and UL nested items differently).

ul, ol {
    /* Set margins, padding, and other generic styles */
}
ul li, ul ul li, ol ul li {
    list-style-type: disc; /* unordered lists */
}
ol li, ul ol li, ol ol li {
    list-style-type: decimal; /* ordered lists */
}

It's as easy as yodeling CSS!

Answer 5

Do you need direct child? IE6 supports descendant selectors like

div span { ... }

Perhaps you could leverage that to target what you want. Perhaps you could post some code so that we could give you a more specific answer?

Answer 6

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.