CSS - is it true - child syntax selectors don't work in IE?

Posted by sprite on February 18, 2006 at 1:26am

I am working on some detailed theming ...

I have noticed that child container selector syntax doesn't work in IE but it does in Firefox.

Can anyone confirm this and provide a link to a documentation source for what CSS does and/or does not work in IE?

[ the following statements represent four different ways to access the page content title text ]

/* appears to work in both IE and Firefox
(selector - descendant syntax)
div.#main h2.#title
{
}

div.main-content h2.content-title
{
}

/* doesn't appear to work in IE */
(selector - child syntax)
div.#main > h2.#title
{
}

div.main-content > h2.content-title
{
}

spritefully yours

Comments

That is true up through IE 6

Posted by nevets on February 18, 2006 at 2:18am

I have a book that lists child selectors as safe for Netscape 6.0 & 7.0, Mozilla 1.0, Opera 5.0 & 6.0 and Konqueror

As noted CSS child selector syntax NOT in Internet Explorer :(

Posted by sprite on February 18, 2006 at 2:26am

Yes, as noted CSS child selector syntax works in most places except Internet Explorer. :(

Based on my current testing CSS descendant selector syntax seems to be the more compatible method of identifying specific elements for styling with property values.

spritefully yours

Here's an excellent reference

Posted by krudd on February 18, 2006 at 4:02am

Web browser CSS support
http://www.webdevout.net/browser_support_css.php

Also note that you can, to an extent, "fake" a child selector. For example, say you have a "div" and want all it's child objects (but not grandchild objects) to have a left margin of 20px.

WITH child-selector support

div > * { margin-left: 20px; }

WITHOUT child-selector support:

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

The way this works is you first apply the styles to all children and then "undo" those styles for grandchildren.

This particular example is quite handy when you're trying to deal with box-model differences.

IE child selector by testing the parent node

Posted by wlegoussouart on October 18, 2006 at 8:28am

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 ;-)

Xypho

Wilfrid Legoussouart.

Discussion of various solutions

Posted by kcraft on July 21, 2010 at 4:38am

Here is a discussion of various solutions to the IE6 child selector problem: http://craftycodeblog.com/2010/05/19/emulating-css-child-selectors-in-ie6/