Geek Answers Handbook

CSS child selector (>) does not work with IE

The following CSS works well under firefox, but does not work in IE browser. Why?
Also, how can I make only the elements directly below the parent element suffer from 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>
+5
source share
3 answers

Internet Explorer supports child selector ( >) from version 7, but only in standards mode. Make sure you use Doctype, which launches standards mode .

If you are targeting IE6, you're out of luck. You must either depend on JS or use child selectors.

a>b { foo }

becomes

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

IE6 IE7.

Quirksmode.org:

CSS

, , "un-declate" .

+1

Maybe I'm wrong about what you are looking for, but I would decide to solve your problem:

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

This will work well for you, however keep in mind that if you have another .box with a div in it, they will also be affected.

-2
source

More articles:


All Articles