Hi,
Somewhere in my html page, I have the following code:
<div id="main-body">
<h2>Header text</h2>
<p>Some other text ...</p>
.....
<h2>Another header text</h2>
<p>Some more other text ...</p>
.....
</div>
I would like the first <h2> header to have a different style than all
the other ones. So I tried using the first-child selector:
#main-body {
margin-left: 10px;
margin-right: 10px;
margin-top: 18px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
font-size: 12px;
height: 140px;
}
h2 {
font-size: 14px;
font-variant: small-caps;
margin-top: 5px;
margin-bottom: 0px;
}
DIV > h2:first-child {
font-size: 14px;
font-variant: small-caps;
margin-top: 5px;
margin-bottom: 0px;
color: red;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-top: 10px;
margin-bottom: 15px;
}
What you'd expect is that all the headers are in grey (#666666) as
inherited from #main-body. Except for the first header where in the
selector with the first-child pseudo class, the color of the text is
set to red.
When I try to open the page in Mozilla Firebird, 0.7, everything is
displayed is expected: the first header is red, the other ones are
grey.
But in Internet Explorer 6.0 (Windows XP Professional), all the
headers are grey, as if there is no selector for the first header. Is
this a problem within Internet explorer (perhaps they don't support
the first-child selector?) or am I doing something wrong?
Veerle