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

css, css-selectors, html, internet-explorer

Solution

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 }

Problem

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> ```

Original source