html - Is there a CSS selector for the first direct child only?

itemprop="text">

I have the following
html

            class="section">
 
header


            

 contents
 
sub contents 1
            
 
sub contents 2

            




And
the following
style:

DIV.section
            DIV:first-child 
{

            ...
}

For
some reason that I don't understand the style is getting applied to the "sub
contents 1"

as well as the
"header"

.

I thought that the selector on the style would
only apply to the first direct child of a div with a class called "section". How can I
change the selector to get what I want?

class="post-text" itemprop="text">

class="normal">Answer

What you posted literally means
"Find any divs that are inside of section divs and are the first child of their parent."
The sub contains one tag that matches that
description.

It is unclear to me whether you
want both children of the main div or not. If so, use
this:

div.section >
            div

If you only want
the header, use this:

div.section
            >
            div:first-child

Using
the > changes the description to: "Find any divs that are
the direct descendents of section divs" which is what you
want.

Please note that all major browsers
support this method, except IE6. If IE6 support is mission-critical, you will have to
add classes to the child divs and use that, instead. Otherwise, it's not worth caring
about.