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

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.

Answer 2

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 3

Putting a custom class on the element.

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

Answer 4

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 5

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 6

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 7

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/