CSS child selector (>) doesn't work with IE

Question

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?

CSS:

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

HTML:

<div class="box">
   level1
   <div>
      level2
      <div> level3</div>
      <div> level3</div>
   </div>
   <div>
      level2
      <div> level3</div>
      <div> level3</div>
   </div>
</div>

Answer 1

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.

Answer 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.

Answer 3

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 }