Removing top margin from first element using modern CSS

Question

Is it possible with CSS and the latest Chrome or Firefox to automatically remove the top margin from the first <h1> tag, or do I have still have to use jQuery?

Answer 1

You just need h1:first-child { margin-top: 0px; } DEMO

Answer 2

There's no :first-of-page selector so no, you can't use CSS for sure. No way in CSS to extract all h1 from a page whatever their parents and preceding siblings and only take the first one.
You need to know a little bit more about your h1 elements.

Examples:

• you can select the first h1 if it's also the (first and or only) child of body > header (or #header in HTML 4.01)
• if all h1 are siblings, then h1:first-of-type is the first one for sure
• if the first h1 is right after your main nav in a section, then body > nav + section > h1 would select it. Or maybe body > header > nav + section > h1:first-of-type