CSS: first-child selector including text nodes

Question

Is there a way to select a CSS element, which is the first child of its parent element, counting text nodes? I want to remove the top edge of the header if it is at the top of its parent, but if I use:

#content h1 { margin-top: 1em; } #content h1:first-child { margin-top: 0; } 

and have some HTML like

 <div id="content"> This is some text. <h1>A heading</h1> Some more text. </div> 

margin is still removed. Is there a way in CSS to prevent this?

Answer 1

Remove the margin , not just the margin-top element, h1 pushes the next element down

 #content h1 { margin-top: 1em; } #content h1:first-child { margin: 0px; } 

Demo script

If you want to delete everything except the first

 #content h1:not(:first-child) { margin: 0px; } 

Updated Fiddle