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>
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 }
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With