PDA

Click to See Complete Forum and Search --> : first-child confuse me

Efferent
07-31-2007, 06:33 PM
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">

p:first-child em {color:green}
p:first-child strong {color:red}

</style>

</head>
<body>

<p><em>Emphasis</em></p>

<p><strong>Strong</strong></p>

</body>
</html>

As you see, there are two "p" elements here. When load this page in FF2.0 the first "p" element works fine. The text turns green. The second "p" element doesn't work correctly. The text remains black colour.

I load the same page in IE6. Both "p" elements doesn't work.

I know IE6 has problem with some pseudo classes. What I don't understand is why some of the code works fine some doesn't. Could this be a bug of browser?
drhowarddrfine
07-31-2007, 07:17 PM
I think it might be due to you using the first child of a <p> both times. They are the same thing. first-child affects the first of <p>, and it does, but then you re-define it and it might be saying, "hey, I'm past that already".

first-child does not work in IE6 and has lots of problems in IE7.
ray326
07-31-2007, 10:22 PM
IE doesn't do first-child. Your selector, p:first-child, means "a paragraph that is the first paragraph in a containing element." The containing element is <body> and Fx is doing it right.

The SelectOracle (http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py) is a neat selector explainer.