CSS: выберите первого соседнего брата

У меня есть такой список HTML:

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

Поскольку под заголовком 1 нет текста, я хочу скрыть его с помощью CSS.

Если я сделаю это,

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

он скроет заголовок 2 вместо заголовка 1.

Как я могу скрыть заголовок 1? Есть ли способ найти соседних братьев и сестер и выбрать первого?