CODEWITHSUNDEEP
htmlcssinternet-explorercss-selectors
Geln Yang
Geln Yang

Reputation: 912

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?

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>

Upvotes: 5

Views: 9021

Answers (3)

Quentin
Quentin

Reputation: 943185

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 }

Upvotes: 18

Montana Flynn
Montana Flynn

Reputation: 299

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.

Upvotes: -2

Pekka
Pekka

Reputation: 449395

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.

Upvotes: 1

Related Questions