How do I select the first adjacent sibling?

I have an HTML list like so:

<ul>
  <li class="heading">Heading 1</li>
  <li class="heading">Heading 2</li>
  <li>Text Under Heading 2</li>
</ul>

Since Heading 1 has no text under it, I want to hide it with CSS.

If I do this,

li.heading + li.heading { display: none; }

it hides Heading 2 instead of Heading 1.

How can I hide Heading 1? Is there a way to look for adjacent siblings and select the first one?