CSS selector for first heading of a div

Question

I have the following HTML structure:

<div class="content">
    <img src="#">
    <!-- Text content here -->
</div>

This forms the basis for a content page of a website I've made which uses a CMS to manage the content, with the ability to select an image and then a WYSIWYG editor for the text content. An example of the page's HTML that would be output by the CMS is:

<div class="content">
    <img src="#">
    <h1>Lorem</h1>
    <p>Lorem ipsum dolor</p>
</div>

Is there a CSS selector that will select the h1 in the example HTML above? I want to be able to remove the top margin of the heading if the text content section begins with a heading, but I can't do this with a class (since the text content is output by the CMS through a WYSIWYG editor).

Answer 1

You can try this

.content > img + h1{
 // css style
}

2nd option

.content > h1:first-child{
// here css
}

3rd

.content h1:first-child{
// here style
}

Answer 2

.content > h1:first-of-type {margin-top:0;}

that should do the trick