HTML and CSS

IE8 Child Selector

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2009

Posts: 12

Reputation: Dat0 is an unknown quantity at this point

Solved Threads: 0

Dat0

Offline

Newbie Poster

IE8 Child Selector

Oct 12th, 2009

Hi! I read that IE 8 accepts child selectors. But it does not seem to work for my IE8 (Spanish version if this even matters).

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
#div > p{background-color: blue;}
========================
<div id="div">
<p>Shoud work here!</p>
        <div>
                <p>and not here</p>
        </div>
</div>
#div > p{background-color: blue;}
========================
<div id="div">
<p>Shoud work here!</p>
        <div>
                <p>and not here</p>
        </div>
</div>

It works for firefox and not for internet explorer. What could be happening?

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Oct 12th, 2009

•

Originally Posted by Dat0

Hi! I read that IE 8 accepts child selectors. But it does not seem to work for my IE8 (Spanish version if this even matters).
Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)
#div > p{background-color: blue;}
========================
<div id="div">
<p>Shoud work here!</p>
        <div>
                <p>and not here</p>
        </div>
</div>
#div > p{background-color: blue;} ======================== <div id="div"> <p>Shoud work here!</p> <div> <p>and not here</p> </div> </div>
It works for firefox and not for internet explorer. What could be happening?

What DTD are you using? Might require STRICT mode.
But if you are working in a strict document than it will mean it doesn't support direct child selector syntax.

But this is a highly effective workaround - try this.

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
	<style type="text/css">
            #div p{background-color: blue;}
            #div div p{background-color: transparent;}
	</style>
	<style type="text/css">
            #div p{background-color: blue;}
            #div div p{background-color: transparent;}
	</style>