Is there a CSS selector for the first direct child only

Question

I have the following html   lt div class  section  gt      lt div gt header lt  div gt      lt div gt            contents            lt div gt sub contents 1 lt  div gt                           lt div gt sub contents 2 lt  div gt      lt  div gt   lt  div gt    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   lt div gt  as well as the  header   lt div gt      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

User · Answer

div section  gt  div

User · Answer

Found this question searching on Google   This will return the first child of a element with class container  regardless as to what type the child is    container  gt    first-child

User · Answer

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  gt  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  gt  div   color  red   div section  gt  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

User · Answer

The CSS selector for the direct first-child in your case is    section  gt   first-child   The direct selector is   and the first child selector is  first-child  No need for an asterisk before the   as others suggest   You could speed up the DOM searching by modifying this solution by prepending the tag   div section  gt   first-child

User · 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  gt  div   If you only want the header  use this   div section  gt  div first-child   Using the  gt  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

User · Answer

Use div section  gt  div    Better yet  use an  lt h1 gt  tag for the heading and div section h1 in your CSS  so as to support older browsers  that don t know about the  gt   and keep your markup semantic

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

Examples related to html

Examples related to css

Examples related to css-selectors