Home/ Questions/Q 546029
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T10:49:26+00:00

I have the following html <div class=section> <div>header</div> <div> contents <div>sub contents 1</div> <div>sub

  • 0

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 1” <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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0