CSS Child Selector (>) Doesn't Work With IE

The following CSS works well under firefox but doesn't work under IE browser, Why? Also, how can I make only the elements, directly under the parent element, be affected by CSS? C

Solution 1:

Internet Explorer supports the child selector (>) since version 7, but only in Standards mode. Make sure you are using a Doctype that triggers standards mode.

If you are targeting IE6 then you are out of luck. You need to either depend on JS or use descendant selectors.

a>b { foo }

becomes

a b { foo }
a * b { reverse-of-foo }

Solution 2:

The child selector is not supported at all by IE6 and only partly by IE7.

Quirksmode.org: Child selector

CSS Compatibility tables

there is, sadly, no way to do this except to "un-declate" the definitions for all grandchildren.

Solution 3:

I may be wrong about what you are looking for but this is how I would tackle your problem:

.box {font:24px;}
.box div {font:18px}
.box div div {font:12px;}

This will work fine for you example, however be aware that if you have another .box with div's in it they will be affected as well.