css selector for first direct child only

Question

I have the following html

<div class="section">
   <div>header</div>
   <div>
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>

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 2 div as well as the header div. 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?

Answer 1

What you posted literally means "Find any divs that are inside of section divs and are the first child of their parent." The sub contents 1 div 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.

Answer 2

div.section > div

Answer 3

CSS is called Cascading Style Sheets because the rules are inherited. Using the following selector, will select just the direct child of the parent, but its rules will be inherited by that div's children divs:

div.section > div { color: red }

Now, both that div and its children will be red. You need to cancel out whatever you set on the parent if you don't want it to inherit:

div.section > div { color: red }
div.section > div div { color: black }

Now only that single div that is a direct child of div.section will be red, but its children divs will still be black.

Answer 4

Use div.section > div.

Better yet, use an <h1> tag for the heading and div.section h1 in your CSS, so as to support older browsers (that don't know about the >) and keep your markup semantic.

Answer 5

If you need to support IE6 then this article may help you emulate the child selector for IE6: http://craftycode.wordpress.com/2010/05/19/emulating-css-child-selectors-in-ie6/